Components

Radio group

One of many. Reach for it over a Select when the options can fit on screen and their labels are equally weighted.

When to useto pick one of a small, fully visible set of options — up to about five.

Import

import { RadioGroup, RadioGroupItem } from "@ravnhq/efni/radio-group"

Density selector

Compact13px rows · 32px height

Comfortable14px rows · 36px height

Spacious14px rows · 44px height

<RadioGroup value={value} onValueChange={setValue}>
  <label htmlFor="density-compact">
    <RadioGroupItem value="compact" id="density-compact" />
    <Label htmlFor="density-compact">Compact</Label>
  </label>
  …
</RadioGroup>

Inline

table

board

timeline

<RadioGroup defaultValue="table">
  <RadioGroupItem value="table" id="view-table" />
  <Label htmlFor="view-table">Table</Label>
  …
</RadioGroup>

Do & don't

table

board

timeline

Use RadioGroup when the whole option set fits on screen — readers compare labels at a glance.

Don't hide 3 mutually exclusive options behind a Select — one click is faster than two.

Accessibility

Key	Action
`Tab`	Focus enters the checked item (or the first).
`ArrowUp / ArrowDown`	Move selection within the group.
`Space`	Select the focused item (if not already).

The group behaves as a single tab stop — Tab moves past it once the selection is set.
Wrap each item in a Label with htmlFor so clicking the text selects the radio.

Guidelines

Order options by frequency or natural order (compact/comfortable/spacious).
Set a defaultValue so keyboard users don't Tab into an empty group.
Group visually — each item should read as part of a set, not floating.

Don't

Don't use RadioGroup for a boolean — that's a Switch.
Don't stack more than five options — use Select or Combobox.
Don't skip labels — the dot alone means nothing.

Props

Prop	Type	Default	Description
`value`	`Value`	—	The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead.
`defaultValue`	`Value`	—	The uncontrolled value of the radio button that should be initially selected. To render a controlled radio group, use the `value` prop instead.
`onValueChange`	`((value: Value, eventDetails: RadioGroup.ChangeEventDetails) => void)`	—	Callback fired when the value changes.
`RadioGroupItem.value`	`Value`	—	The unique identifying value of the radio in a group.
`…props`	`RadioGroupPrimitive.Props`	—	Everything RadioGroup passes to the element it renders.