Radio Group

Form

A group of radio buttons for single-choice selection, with vertical/horizontal layout and card mode.

Props

Prop	Type	Default	Description
`modelValue`	`string \| number \| null`	—	Selected value (v-model).
`options`	`DsRadioOption[]`	—	Array of options with label, value, description?, disabled?.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction.
`card`	`boolean`	`false`	Card-style bordered display.
`disabled`	`boolean`	`false`	Disable all options.
`name`	`string`	—	Name attribute for the radio group.

Examples

Vertical (default)

StarterFor individuals and small projects

ProFor teams and growing businesses

EnterpriseFor large organisations

vue

<script setup lang="ts">
const plan = ref('pro')
const options = [
  { label: 'Starter', value: 'starter', description: 'For individuals' },
  { label: 'Pro', value: 'pro', description: 'For teams' },
  { label: 'Enterprise', value: 'enterprise', description: 'For large orgs' },
]
</script>
<template>
  <DsRadioGroup v-model="plan" :options="options" />
</template>

Card mode

StarterFor individuals and small projects

ProFor teams and growing businesses

EnterpriseFor large organisations

Horizontal

Monthly

Yearly

Skeleton

Use DsRadioGroupSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsRadioGroupSkeleton :count="3" />

Card mode

vue

<DsRadioGroupSkeleton
  :count="3"
  card
/>

Accessibility

Uses role="radiogroup" and native radio inputs (visually hidden).
Keyboard navigable with arrow keys.

PhoneInput

Select