Skip to content

Forms

IRadioGroup

One choice from a handful of visible options. Past five or six, use an ISelect instead.

A string item is expanded to { label, value } with both the same.

Descriptions

An item can carry a description, shown under its label.

Up to three invoices a month.

Unlimited invoices and reminders.

Everything in Pro, plus shared clients.

Horizontal

orientation="horizontal" lays the options out in a row, and arrow-key navigation follows the orientation.

Sizes

Props

PropTypeDefaultDescription
items(RadioGroupItemOption | string)[][]Options to render
size'sm' | 'md' | 'lg''md'Control scale
unstyledbooleanDrop built-in classes
classstringMerged with the built-in classes
ui{ root?, item?, label?, description? }Per-slot class overrides

disabled, required, name, orientation and dir are forwarded to Reka UI's RadioGroupRoot, so the group posts in a plain <form>.

ts
interface RadioGroupItemOption {
  label: string
  value: string
  description?: string
  disabled?: boolean
}

A radio group cannot be cleared once a choice is made. Include an explicit "None" or "Any" option when no answer is a valid answer.