OptionCards

Grid of OptionCard items bound to a single or multiple value. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue
import { UiOptionCards } from '@ziyarago/ui/vue'

Single

Package
Vue
<UiOptionCards
  label="Package"
  v-model="value"
  :options="[{ value: 'economy', title: 'Economy', desc: '10 days, 3-star', price: '$890', icon: 'bed-single' }, { value: 'standard', title: 'Standard', desc: '10 days, 4-star', price: '$1 290', icon: 'bed-double' }, { value: 'premium', title: 'Premium', desc: '10 days, 5-star', price: '$1 890', icon: 'crown' }]"
 />

Multiple

Extras
Vue
<UiOptionCards
  label="Extras"
  multiple
  v-model="value"
  :options="[{ value: 'transfer', title: 'Transfer', desc: 'Airport pickup', price: '+$60', icon: 'car' }, { value: 'guide', title: 'Guide', desc: 'Private guide', price: '+$120', icon: 'map' }, { value: 'sim', title: 'SIM card', desc: '20 GB data', price: '+$15', icon: 'smartphone' }]"
 />

Sizes

Package
Package
Package
Package
Package
Vue
<UiOptionCards
  size="xs"
  label="Package"
  v-model="value"
  :options="[{ value: 'economy', title: 'Economy', desc: '3-star', price: '$890', icon: 'bed-single' }, { value: 'standard', title: 'Standard', desc: '4-star', price: '$1 290', icon: 'bed-double' }]"
 />

<UiOptionCards
  size="sm"
  label="Package"
  v-model="value"
  :options="[{ value: 'economy', title: 'Economy', desc: '3-star', price: '$890', icon: 'bed-single' }, { value: 'standard', title: 'Standard', desc: '4-star', price: '$1 290', icon: 'bed-double' }]"
 />

<UiOptionCards
  size="md"
  label="Package"
  v-model="value"
  :options="[{ value: 'economy', title: 'Economy', desc: '3-star', price: '$890', icon: 'bed-single' }, { value: 'standard', title: 'Standard', desc: '4-star', price: '$1 290', icon: 'bed-double' }]"
 />

<UiOptionCards
  size="lg"
  label="Package"
  v-model="value"
  :options="[{ value: 'economy', title: 'Economy', desc: '3-star', price: '$890', icon: 'bed-single' }, { value: 'standard', title: 'Standard', desc: '4-star', price: '$1 290', icon: 'bed-double' }]"
 />

<UiOptionCards
  size="xl"
  label="Package"
  v-model="value"
  :options="[{ value: 'economy', title: 'Economy', desc: '3-star', price: '$890', icon: 'bed-single' }, { value: 'standard', title: 'Standard', desc: '4-star', price: '$1 290', icon: 'bed-double' }]"
 />

API reference

Grid of selectable OptionCards, single or multiple choice. Use for plans, room types and delivery options.

Props

PropType and valuesDefaultDescription
modelValuev-modelstring | number | (string | number)[]—Selected value, or an array of values when multiple is true.
options{ value: string | number; title: string; desc?: string; price?: string; image?: string; icon?: string }[]'[]'Cards to show. Fields are passed to OptionCard.
multiplebooleanfalseAllow several selected cards. modelValue becomes an array.
minnumber220Minimum card width in px before the grid wraps.
labelstring—Label shown above the control.
sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with the value (single) or the new array of values (multiple).