PillSelect

Compact pill-shaped dropdown for quick filters. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

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

Default

Vue

<UiPillSelect
  placeholder="Sort by"
  value="price"
  :options="[{ value: 'price', label: 'Price' }, { value: 'rating', label: 'Rating' }, { value: 'distance', label: 'Distance' }]"
 />

Placeholder

Vue

<UiPillSelect
  placeholder="Any city"
  value=""
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
 />

Sizes

Vue

<UiPillSelect
  size="xs"
  value="price"
  :options="[{ value: 'price', label: 'Price' }, { value: 'rating', label: 'Rating' }]"
 />

<UiPillSelect
  size="sm"
  value="price"
  :options="[{ value: 'price', label: 'Price' }, { value: 'rating', label: 'Rating' }]"
 />

<UiPillSelect
  size="md"
  value="price"
  :options="[{ value: 'price', label: 'Price' }, { value: 'rating', label: 'Rating' }]"
 />

<UiPillSelect
  size="lg"
  value="price"
  :options="[{ value: 'price', label: 'Price' }, { value: 'rating', label: 'Rating' }]"
 />

<UiPillSelect
  size="xl"
  value="price"
  :options="[{ value: 'price', label: 'Price' }, { value: 'rating', label: 'Rating' }]"
 />

API reference

Small pill-shaped dropdown button. Use for inline filters and sort controls in toolbars.

Props

PropType and valuesDefaultDescription

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

valuestring | number—Alias of modelValue, used when modelValue is not set.

options{ value: string | number; label: string; disabled?: boolean }[]'[]'Available options. A missing list renders an empty menu. An option with disabled: true cannot be chosen.

placeholderstring—Shown when value matches no option.

disabledbooleanfalseDisables the control.

sizexssmmdlgxl'md'Pill height and font size.

Events

Vue: @name. React: onName.

changeCalled with the value of the chosen option.

Notes

The menu closes on outside click and on Escape.