> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Select Multi Input

> InputSelectMultiple.vue Component Documentation

The `InputSelectMultiple.vue` component is a multi-select input field with advanced features such as searching, toggles for selection, and customizable controls. It allows users to select multiple options from a given list and provides flexibility for handling various use cases.

***

## Features

<CardGroup cols={2}>
  <Card title="Multi-Select Support" icon="square-1">
    Select multiple options simultaneously, enhancing flexibility for various use cases.
  </Card>

  <Card title="Searchable Options" icon="square-2">
    Includes an optional search input for filtering options, allowing users to find selections quickly.
  </Card>

  <Card title="Toggles for Selection" icon="square-3">
    Enables toggle-based selection, providing an alternative to the traditional dropdown.
  </Card>

  <Card title="Customizable Controls" icon="square-4">
    Includes actions like "Select All" and "Clear All" to manage selections with ease.
  </Card>

  <Card title="Reactive Options" icon="square-5">
    Dynamically updates selected values with <code>v-model</code>, ensuring real-time synchronization.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```vue theme={null}
<InputSelectMultiple
  v-model="selectedOptions.data"
  :options="optionsMulti"
  :width="100"
  label="Select options"
/>
<p>Selected Options: {{ selectedOptions }}</p>
```

***

## Props

<ParamField path="controls" type="boolean" default="false">
  Enables "Select All" and "Clear All" controls.
</ParamField>

<ParamField path="error" type="string | boolean" default="''">
  Error message to display below the input field.
</ParamField>

<ParamField path="label" type="string" default="''">
  Label text displayed above the input field.
</ParamField>

<ParamField path="labelEmpty" type="string | boolean" default="''">
  Label text for an empty option.
</ParamField>

<ParamField path="nullable" type="boolean" default="false">
  Allows for a nullable (empty) option.
</ParamField>

<ParamField path="options" type="array | object" default="[]">
  The list of options available for selection.
</ParamField>

<ParamField path="search" type="boolean" default="false">
  Enables a search input for filtering options.
</ParamField>

<ParamField path="shape" type="object" default="undefined">
  Defines the structure of options (`value` and `text` keys).
</ParamField>

<ParamField path="toggles" type="boolean" default="false">
  Enables toggle-based selection for options.
</ParamField>

<ParamField path="type" type="string" default="'text'">
  Specifies the input type.
</ParamField>

<ParamField path="v-model" type="array" default="[]">
  Two-way binding for the selected options.
</ParamField>

<ParamField path="width" type="number | string" default="100">
  Width of the input field as a percentage.
</ParamField>

***

## Example Use Cases

### Disabled Input with Controls

```vue theme={null}
<InputSelectMultiple
  v-model="selectedOptions.data"
  :options="optionsMulti"
  :width="100"
  label="Select options - disabled controls"
  disabled
  controls
/>
<p>Selected Options: {{ selectedOptions }}</p>
```

### Read-Only Input

```vue theme={null}
<InputSelectMultiple
  v-model="selectedOptions.data"
  :options="optionsMulti"
  :width="100"
  label="Select options - readonly"
  readonly
  controls
/>
<p>Selected Options: {{ selectedOptions }}</p>
```

### Example with Search and Toggles

```vue theme={null}
<InputSelectMultiple
  v-model="selectedOptions.data"
  :options="optionsMulti"
  :width="100"
  label="Select options - Search Toggles"
  search
  toggles
/>
<p>Selected Options: {{ selectedOptions }}</p>
```

### Example with Controls and Error Handling

```vue theme={null}
<InputSelectMultiple
  v-model="selectedOptions.data"
  :options="optionsMulti"
  :width="100"
  label="Select options - Search"
  error="some error"
  controls
  search
/>
<p>Selected Options: {{ selectedOptions }}</p>
```

***

## Notes

* **Reactive Options**: The `v-model` binding ensures the selected values are updated in real-time.
* **Search Functionality**: Use the `search` prop to enable filtering options dynamically.
* **Control Actions**: The `controls` prop adds "Select All" and "Clear All" buttons for enhanced usability.

For further customization, refer to the component's source code.