Forms

Radio group

Exactly one choice from a small set. Round, because that shape is what says the options are exclusive.

One tab stop

Tab into the group, then use the arrow keys. Radix gives it a roving tabindex, so the group is one stop and the arrows move between options.

Patch: bug fixes only

Minor: new tokens, nothing removed

Major: a token was renamed

<RadioGroup.Root defaultValue="minor">
  <RadioGroup.Item value="patch">Patch: bug fixes only</RadioGroup.Item>
  <RadioGroup.Item value="minor">Minor: new tokens, nothing removed</RadioGroup.Item>
  <RadioGroup.Item value="major">Major: a token was renamed</RadioGroup.Item>
</RadioGroup.Root>

Disabled

Disable the root for the whole group, or one item on its own.

<RadioGroup.Root defaultValue="patch">
  <RadioGroup.Item value="patch">Patch</RadioGroup.Item>
  <RadioGroup.Item value="minor">Minor</RadioGroup.Item>
  <RadioGroup.Item value="major" disabled>Major: needs a maintainer</RadioGroup.Item>
</RadioGroup.Root>

<RadioGroup.Root defaultValue="minor" disabled>
  <RadioGroup.Item value="minor">Minor</RadioGroup.Item>
  <RadioGroup.Item value="major">Major</RadioGroup.Item>
</RadioGroup.Root>

Parts

Import it as a namespace, and the parts work on either side of the server boundary.

import * as RadioGroup from '@minuk-hwang-design-system/components-react/radio-group';

Part	What it is
`RadioGroup.Root`	Owns the value and the roving focus.
`RadioGroup.Item`	One option. With children it renders the row and the label association.

Props

Prop	Type	Default	Notes
`Root.value`	`string`	—	Controlled selection.
`Root.defaultValue`	`string`	—	Uncontrolled initial selection.
`Root.onValueChange`	`(value: string) => void`	—	Fires with the chosen item's value.
`Root.disabled`	`boolean`	false	Disables every option in the group.
`Item.value`	`string`	—	What this option is worth.
`Item.disabled`	`boolean`	false	Disables one option. The arrow keys skip it.