Radio Group

A real <fieldset> and <legend> grouping real <input type="radio"> elements that share one name. Arrow-key roving between options and "exactly one selected" are native radio button behaviour.

Plan

FreeProTeam

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Notify me about

All new messagesMentions onlyNothing

Unstyled

Same component — Kernel look stripped. See Platforms.

legend

disabled

Usage

<RadioGroup label="Notify me about" defaultValue="all">
  <RadioGroupItem value="all">All new messages</RadioGroupItem>
  <RadioGroupItem value="mentions">Mentions only</RadioGroupItem>
  <RadioGroupItem value="none">Nothing</RadioGroupItem>
</RadioGroup>

<kernel-radio-group label="Notify me about" name="notify">
  <kernel-radio-group-item value="all">All new messages</kernel-radio-group-item>
  <kernel-radio-group-item value="mentions">Mentions only</kernel-radio-group-item>
  <kernel-radio-group-item value="none">Nothing</kernel-radio-group-item>
</kernel-radio-group>

Props

Props for Radio Group.
Component	Prop	Type
`RadioGroup`	`label`	ReactNode (required)
`RadioGroup`	`value` / `defaultValue`	string
`RadioGroup`	`onValueChange`	(value: string) => void
`RadioGroupItem`	`value`	string (required)