Vuersatile Components

Appearance

On this page

InputMultiSelect ​

A more complex input multi-select.

Implements mixins RequiredInputMixin and BasicInputMixin.

We will use the following options:

js
const multiselectOptions = [
  { value: { id: 1, text: 'VUE' }, text: 'Vue.js' },
  { value: { id: 2, text: 'REACT' }, text: 'React' },
  { value: { id: 3, text: 'ANGULAR' }, text: 'Angular' },
  { value: { id: 4, text: 'EMBER' }, text: 'Ember' },
  { value: { id: 5, text: 'SVELTE' }, text: 'Svelte' },
  { value: { id: 6, text: 'AURELIA' }, text: 'Aurelia' },
  { value: { id: 7, text: 'LIT' }, text: 'Lit/Polymer' }
]
html
<Card>
    <Form>
        <InputMultiSelect name="select" label="Select one or multiple options" placeholder="Favourites JavaScript frameworks..." required :options="multiselectOptions" />
    </Form>
</Card>

Props ​

  • options. Changes selectable options.
  • optionValueKey (default value), optionDefaultKey (default text) and optionDisabledKey (default disabled). Changes which values from options will pick-up and which ones will be disabled.
  • allowClear (default false): allows for clearing selected value with a top button.
html
<Card>
    <Form>
        <InputMultiSelect
            name="select"
            label="Select one or multiple options"
            placeholder="Favourites JavaScript frameworks..."
            required
            allowClear
            :options="multiselectOptions" />
    </Form>
</Card>
  • allowSearch (default false): if allow search in selectable options.
html
<Card>
    <Form>
        <InputMultiSelect
            name="select"
            label="Select one or multiple options"
            placeholder="Favourites JavaScript frameworks..."
            allowSearch
            :options="multiselectOptions" />
    </Form>
</Card>
  • placeholder (default null): text shown when no selected value.
html
<Card>
    <Form>
        <InputMultiSelect name="select" label="Select one or multiple options" placeholder="Select your favourites JavaScript frameworks..." required :options="multiselectOptions" />
    </Form>
</Card>
  • mountOptionsOutside (default false): wether to mount selectable values drop-down outside or inside the component. Inside should be faster, but outside can prevent some glitches when input is on a modal or inside a box with overflow: hidden;.
html
<Card>
    <Form>
        <InputMultiSelect
            name="select"
            label="Select one or multiple options"
            placeholder="Favourites JavaScript frameworks..."
            mountOptionsOutside
            :options="multiselectOptions" />
    </Form>
</Card>

Emits ​

  • changeField. Custom change event.