GroupedSelect

Dropdown whose options are organised under group headings. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

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

Rooms by hotel

Room

Vue

<UiGroupedSelect
  label="Room"
  placeholder="Choose a room"
  v-model="value"
  :groups="[{ label: 'Swissotel Makkah', options: [{ value: 'swiss-double', label: 'Double, Kaaba view' }, { value: 'swiss-suite', label: 'Junior suite' }] }, { label: 'Anwar Al Madinah', options: [{ value: 'anwar-twin', label: 'Twin room' }, { value: 'anwar-family', label: 'Family room' }] }]"
 />

Sizes

Room

Vue

<UiGroupedSelect
  size="xs"
  label="Room"
  v-model="value"
  :groups="[{ label: 'Swissotel Makkah', options: [{ value: 'swiss-double', label: 'Double, Kaaba view' }] }]"
 />

<UiGroupedSelect
  size="sm"
  label="Room"
  v-model="value"
  :groups="[{ label: 'Swissotel Makkah', options: [{ value: 'swiss-double', label: 'Double, Kaaba view' }] }]"
 />

<UiGroupedSelect
  size="md"
  label="Room"
  v-model="value"
  :groups="[{ label: 'Swissotel Makkah', options: [{ value: 'swiss-double', label: 'Double, Kaaba view' }] }]"
 />

<UiGroupedSelect
  size="lg"
  label="Room"
  v-model="value"
  :groups="[{ label: 'Swissotel Makkah', options: [{ value: 'swiss-double', label: 'Double, Kaaba view' }] }]"
 />

<UiGroupedSelect
  size="xl"
  label="Room"
  v-model="value"
  :groups="[{ label: 'Swissotel Makkah', options: [{ value: 'swiss-double', label: 'Double, Kaaba view' }] }]"
 />

API reference

Single-choice dropdown with option groups under headings. Use for long lists that have natural categories.

Props

PropType and valuesDefaultDescription

modelValuev-modelstring | number—Value of the selected option.

groups{ label: string; options: { value: string | number; label: string; disabled?: boolean }[] }[]'[]'Groups with a heading and their options. Option values must be unique across groups. An option with disabled: true cannot be chosen.

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 value of the chosen option.

Notes

The popup closes on outside click and on Escape.