MultiSelect

Dropdown that allows ticking several options. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

import { UiMultiSelect } from '@ziyarago/ui/vue'

Selected

Amenities

Vue

<UiMultiSelect
  label="Amenities"
  :options="[{ value: 'wifi', label: 'Free Wi-Fi' }, { value: 'shuttle', label: 'Haram shuttle' }, { value: 'breakfast', label: 'Breakfast included' }, { value: 'prayer', label: 'Prayer room' }]"
  v-model="value"
 />

Empty

Amenities

Vue

<UiMultiSelect
  label="Amenities"
  placeholder="Select amenities"
  :options="[{ value: 'wifi', label: 'Free Wi-Fi' }, { value: 'shuttle', label: 'Haram shuttle' }, { value: 'breakfast', label: 'Breakfast included' }, { value: 'prayer', label: 'Prayer room' }]"
  v-model="value"
 />

Sizes

Amenities

Vue

<UiMultiSelect
  size="xs"
  label="Amenities"
  :options="[{ value: 'wifi', label: 'Free Wi-Fi' }, { value: 'shuttle', label: 'Haram shuttle' }, { value: 'breakfast', label: 'Breakfast included' }, { value: 'prayer', label: 'Prayer room' }]"
  v-model="value"
 />

<UiMultiSelect
  size="sm"
  label="Amenities"
  :options="[{ value: 'wifi', label: 'Free Wi-Fi' }, { value: 'shuttle', label: 'Haram shuttle' }, { value: 'breakfast', label: 'Breakfast included' }, { value: 'prayer', label: 'Prayer room' }]"
  v-model="value"
 />

<UiMultiSelect
  size="md"
  label="Amenities"
  :options="[{ value: 'wifi', label: 'Free Wi-Fi' }, { value: 'shuttle', label: 'Haram shuttle' }, { value: 'breakfast', label: 'Breakfast included' }, { value: 'prayer', label: 'Prayer room' }]"
  v-model="value"
 />

<UiMultiSelect
  size="lg"
  label="Amenities"
  :options="[{ value: 'wifi', label: 'Free Wi-Fi' }, { value: 'shuttle', label: 'Haram shuttle' }, { value: 'breakfast', label: 'Breakfast included' }, { value: 'prayer', label: 'Prayer room' }]"
  v-model="value"
 />

<UiMultiSelect
  size="xl"
  label="Amenities"
  :options="[{ value: 'wifi', label: 'Free Wi-Fi' }, { value: 'shuttle', label: 'Haram shuttle' }, { value: 'breakfast', label: 'Breakfast included' }, { value: 'prayer', label: 'Prayer room' }]"
  v-model="value"
 />

API reference

Dropdown with checkboxes for choosing several values. Use for filters and multi-valued fields.

Props

PropType and valuesDefaultDescription

modelValuev-model(string | number)[]'[]'Values of the selected options.

options{ value: string | number; label: string; disabled?: boolean }[]'[]'Available options. An option with disabled: true cannot be toggled.

labelstring—Label shown above the control.

placeholderstring—Shown when nothing is selected. Defaults to "—".

disabledbooleanfalseDisables the control.

sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with the new array of values after toggling an option.

Notes

The trigger shows "N selected"; the list stays open while picking and closes on outside click or Escape.