RadioGroup

Atomshadcn/ui, restyled with tokens

Chooses exactly one of a few options, all visible at once.

components/atoms/radio-group.tsx — RadioGroup, RadioGroupItem
Use it for
Two to about five mutually exclusive options the person should compare.
Not for
Many options (Select) or on/off (Switch, Checkbox).

States

DefaultTab in, then use the arrows
Focused
Invalid
Disabled

Usage

import { Label } from '@/components/atoms/label';

<RadioGroup aria-label="Frequency" value={frequency} onValueChange={setFrequency}>
  <div className="flex items-center gap-2">
    <RadioGroupItem id="weekly" value="weekly" />
    <Label htmlFor="weekly">Weekly</Label>
  </div>
</RadioGroup>

Props

RadioGroup props
PropTypeDefaultDescription
value / defaultValuestring—The chosen item, controlled or uncontrolled.
onValueChange(value: string) => void—Called when the choice changes.
disabledbooleanfalseOn the group, or on one RadioGroupItem.
orientation'vertical' | 'horizontal'—Which arrow keys move between items.
RadioGroupItem valuestring—This item’s value. Required.

Accessibility

  • The group is one Tab stop; arrow keys move and choose.
  • Name the group with aria-label or aria-labelledby.