Docs
GitHub

RadioGroup

RadioGroup is for a single, exclusive choice among a few options. For more than a handful, prefer Select.

Usage

import { RadioGroup, RadioGroupItem } from "@sina-design-system/core";

<RadioGroup value={plan} onValueChange={setPlan}>
  <RadioGroupItem value="standard" label="Standard" />
  <RadioGroupItem value="priority" label="Priority" />
</RadioGroup>

Examples

Group + labels

States

unchecked
checked
disabled

Accessibility

Follows the ARIA radiogroup pattern: Tab enters the group, arrow keys move between options (roving focus), and only the selected option is a tab stop.