Select Multi Input

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

boolean

default:"false"

Enables “Select All” and “Clear All” controls.

string | boolean

default:"''"

Error message to display below the input field.

string

default:"''"

Label text displayed above the input field.

string | boolean

default:"''"

Label text for an empty option.

boolean

default:"false"

Allows for a nullable (empty) option.

array | object

default:"[]"

The list of options available for selection.

boolean

default:"false"

Enables a search input for filtering options.

object

default:"undefined"

Defines the structure of options (value and text keys).

boolean

default:"false"

Enables toggle-based selection for options.

string

default:"'text'"

Specifies the input type.

array

default:"[]"

Two-way binding for the selected options.

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.

Setup

Foundations

Inputs

Features

Multi-Select Support

Searchable Options

Toggles for Selection

Customizable Controls

Reactive Options

Usage

Basic Example

Props

Example Use Cases

Disabled Input with Controls

Read-Only Input

Example with Search and Toggles

Example with Controls and Error Handling

Notes

​Features

Multi-Select Support

Searchable Options

Toggles for Selection

Customizable Controls

Reactive Options

​Usage

​Basic Example

​Props

​Example Use Cases

​Disabled Input with Controls

​Read-Only Input

​Example with Search and Toggles

​Example with Controls and Error Handling

​Notes

Features

Usage

Basic Example

Props

Example Use Cases

Disabled Input with Controls

Read-Only Input

Example with Search and Toggles

Example with Controls and Error Handling

Notes