Radio Group

Radio button group

UI PrimitiveForm Inputs

Overview

Built on Radix UI's RadioGroup primitive. Supports horizontal and vertical orientations. When RadioGroupItem has children, it wraps the radio circle and label in a clickable <label>.

Usage

<RadioGroup defaultValue="option-1" orientation="vertical">
  <RadioGroup.Item value="option-1">Option One</RadioGroup.Item>
  <RadioGroup.Item value="option-2">Option Two</RadioGroup.Item>
  <RadioGroup.Item value="option-3">Option Three</RadioGroup.Item>
</RadioGroup>

Vertical (default)

Horizontal

Notes

  • RadioGroup.Item is an alias for RadioGroupItem.
  • When children are passed to RadioGroup.Item, the entire row (circle + label) is wrapped in a <label> for a larger click target.
  • Use aria-invalid on an item to show the error ring style.
  • Dark mode is handled via semantic tokens.

Props

NameTypeDefaultRequiredDescription
asChildboolean—No