Radio button

Storybook

Choose exactly one option from a small set

Can be used individually or grouped in vertical and horizontal layouts. Use Checkbox instead when users can select more than one, or Dropdown when the list of options is long.

States

With labelWithout labelUnselected
Selected
Disabled, unselected
Disabled, selected

Radio group

Vertical
Horizontal
With disabled option
tsx
// From the npm package
import { RadioButton } from 'rift-ds/components/RadioButton/RadioButton';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/radio-button.json