Select

Dropdown to pick a single option from a list. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

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

With value

City

Vue

<UiSelect
  label="City"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
  v-model="value"
 />

Placeholder

Destination

Vue

<UiSelect
  label="Destination"
  placeholder="Choose a city"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
  v-model="value"
 />

Disabled

Whole control

Disabled option

Vue

<UiSelect
  label="Whole control"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
  v-model="value"
  disabled
 />

<UiSelect
  label="Disabled option"
  placeholder="Taif is unavailable"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif', disabled: true }]"
  v-model="value"
 />

Sizes

City

Vue

<UiSelect
  size="xs"
  label="City"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
  v-model="value"
 />

<UiSelect
  size="sm"
  label="City"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
  v-model="value"
 />

<UiSelect
  size="md"
  label="City"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
  v-model="value"
 />

<UiSelect
  size="lg"
  label="City"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
  v-model="value"
 />

<UiSelect
  size="xl"
  label="City"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
  v-model="value"
 />

API reference

Single-choice dropdown. Use when the user picks one value from a known list.

Props

PropType and valuesDefaultDescription

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

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

labelstring—Label shown above the control.

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

hintstring—Helper text under the control. Hidden while error is set.

errorstring—Error message under the control. Turns the control red and is announced with role="alert".

requiredbooleanfalseAdds a red asterisk to the label. Does not validate.

namestring—Renders a hidden input with this name and the selected value, so the control posts with a native form.

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 (focus returns to the trigger).