FilterChips

Row of selectable chips used to filter lists, in single or multi selection mode. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue

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

Single

Vue

<UiFilterChips
  v-model="value"
  :items="[{ value: 'all', label: 'All' }, { value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }]"
 />

Multi

Vue

<UiFilterChips
  multi
  v-model="value"
  :items="[{ value: '5star', label: '5 stars' }, { value: 'haram', label: 'Near Haram' }, { value: 'breakfast', label: 'Breakfast' }, { value: 'free', label: 'Free cancellation' }]"
 />

Sizes

Vue

<UiFilterChips
  v-model="value"
  :items="[{ value: 'all', label: 'All' }, { value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }]"
  size="xs"
 />

<UiFilterChips
  v-model="value"
  :items="[{ value: 'all', label: 'All' }, { value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }]"
  size="sm"
 />

<UiFilterChips
  v-model="value"
  :items="[{ value: 'all', label: 'All' }, { value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }]"
  size="md"
 />

<UiFilterChips
  v-model="value"
  :items="[{ value: 'all', label: 'All' }, { value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }]"
  size="lg"
 />

<UiFilterChips
  v-model="value"
  :items="[{ value: 'all', label: 'All' }, { value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }]"
  size="xl"
 />

API reference

Row of selectable filter chips with single or multiple selection.

Props

PropType and valuesDefaultDescription

itemsrequired{ value: string; label: string }[]'[]'Chips to render.

modelValuev-modelstring | string[]—Selected value, or array of values when multi.

multibooleanfalseAllows several selected chips; modelValue becomes an array.

sizexssmmdlgxl'md'Chip size.

Events

Vue: @name. React: onName.

changeCalled with the new value, or the new array when multi. Toggles chips off in multi mode only.