RadioGroup

Choose exactly one of several options, with optional hints. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

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

Room type

Vue

<UiRadioGroup
  label="Room type"
  v-model="value"
  :options="[{ value: 'single', label: 'Single' }, { value: 'double', label: 'Double', hint: 'Best for couples' }, { value: 'family', label: 'Family', hint: 'Up to 5 guests' }]"
 />

Sizes

Room type

Vue

<UiRadioGroup
  size="xs"
  label="Room type"
  v-model="value"
  :options="[{ value: 'single', label: 'Single' }, { value: 'double', label: 'Double', hint: 'Best for couples' }]"
 />

<UiRadioGroup
  size="sm"
  label="Room type"
  v-model="value"
  :options="[{ value: 'single', label: 'Single' }, { value: 'double', label: 'Double', hint: 'Best for couples' }]"
 />

<UiRadioGroup
  size="md"
  label="Room type"
  v-model="value"
  :options="[{ value: 'single', label: 'Single' }, { value: 'double', label: 'Double', hint: 'Best for couples' }]"
 />

<UiRadioGroup
  size="lg"
  label="Room type"
  v-model="value"
  :options="[{ value: 'single', label: 'Single' }, { value: 'double', label: 'Double', hint: 'Best for couples' }]"
 />

<UiRadioGroup
  size="xl"
  label="Room type"
  v-model="value"
  :options="[{ value: 'single', label: 'Single' }, { value: 'double', label: 'Double', hint: 'Best for couples' }]"
 />

API reference

Group of radio options with optional hints. Use for a short single-choice list that should stay visible.

Props

PropType and valuesDefaultDescription

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

options{ value: string | number; label: string; hint?: string; disabled?: boolean }[]'[]'Radio options. hint is a second line under the label; disabled: true disables that option only.

labelstring—Label shown above the control.

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".

orientationverticalhorizontal'vertical'horizontal lays the options out in a wrapping row under the label.

disabledbooleanfalseDisables the control.

sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with the value of the chosen option.