Form

RadioGroup

Single-select group of options. Native radio inputs under the hood — keyboard focus, form submission, accessibility built in.

Examples

Vertical

Light Dark Match system

<RadioGroup
  bind:value={theme}
  options={[
    {value: 'light', label: 'Light'},
    {value: 'dark', label: 'Dark'},
    {value: 'auto', label: 'Match system'},
  ]}
  ariaLabel="Theme"
/>

Horizontal

Monthly Annual

<RadioGroup
  direction="horizontal"
  bind:value={billing}
  options={[
    {value: 'monthly', label: 'Monthly'},
    {value: 'annual', label: 'Annual'},
  ]}
/>

Props

Prop	Type	Default	Description
`options`	`{value, label, disabled?}[]`	`—`	Option definitions.
`value`	`T`	`—`	Bindable selected value.
`onChange`	`(next: T) => void`	`—`	Fires when selection changes.
`name`	`string`	`—`	HTML name attribute (auto-generated if omitted).
`direction`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction.
`size`	`'sm' \| 'md'`	`'md'`	Radio dot dimension tier.

Install

CLI

npx @a3tai/mittsu add radio-group