Skip to main content
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

Multi-Select Support

Select multiple options simultaneously, enhancing flexibility for various use cases.

Searchable Options

Includes an optional search input for filtering options, allowing users to find selections quickly.

Toggles for Selection

Enables toggle-based selection, providing an alternative to the traditional dropdown.

Customizable Controls

Includes actions like “Select All” and “Clear All” to manage selections with ease.

Reactive Options

Dynamically updates selected values with v-model, ensuring real-time synchronization.

​
Usage

​
Basic Example

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

​
Props

​
controls
boolean
default:"false"
Enables “Select All” and “Clear All” controls.
​
error
string | boolean
default:"''"
Error message to display below the input field.
​
label
string
default:"''"
Label text displayed above the input field.
​
labelEmpty
string | boolean
default:"''"
Label text for an empty option.
​
nullable
boolean
default:"false"
Allows for a nullable (empty) option.
​
options
array | object
default:"[]"
The list of options available for selection.
​
search
boolean
default:"false"
Enables a search input for filtering options.
​
shape
object
default:"undefined"
Defines the structure of options (value and text keys).
​
toggles
boolean
default:"false"
Enables toggle-based selection for options.
​
type
string
default:"'text'"
Specifies the input type.
​
v-model
array
default:"[]"
Two-way binding for the selected options.
​
width
number | string
default:"100"
Width of the input field as a percentage.

​
Example Use Cases

​
Disabled Input with Controls

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

​
Read-Only Input

<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

<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

<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.