RadioGroup

Choose exactly one option. 20px circles; checked fills with Colors/action/primary and shows an 8px dot.

Figma: 10 / Components / RadioGroup

MonthlyOne timeYearly

Usage

Source: src/components/ui/radio-group.tsx

import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { FieldRow } from '@/components/ui/field'

<RadioGroup defaultValue='monthly'>
    <FieldRow control={<RadioGroupItem value='monthly' />}>Monthly</FieldRow>
    <FieldRow control={<RadioGroupItem value='once' />}>One time</FieldRow>
</RadioGroup>

When to use

When to reach for it, and when to use something else.

Use it for

Two to five mutually exclusive options that should all be visible.

Avoid

Long lists; use a Select.

A single yes or no; use a Checkbox or Switch.

API reference

RadioGroup

Prop	Type	Default	Description
value	string	–	Controlled value.
defaultValue	string	–	Initial value when uncontrolled.
onValueChange	(value: string) => void	–	Called when the choice changes.

RadioGroupItem

Prop	Type	Default	Description
value	string	–	The value this option sets.
disabled	boolean	false	Blocks this option.

PreviousPostEngagement NextSelect