Radio

One choice from a set.

import { Radio, RadioGroup } from 'components/UI/Radio'

Radio group

Put each Radio.Root in a RadioGroup, and give each radio a value. The user can select one value.

MonthlyAnnual

Pass value and onValueChange to RadioGroup to keep the value in your component.

MonthlyAnnual

Billing period: annual

Set disabled on a Radio.Root to disable one option, or on RadioGroup to disable all options. Add text-muted to the label yourself.

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Choose the input from the number of options and what the user picks.

Component	Use it for
Radio	One choice from 2 or 3 options that stay visible.
Select	One choice from 4 to about 10 options, or fewer options when space is tight.
Combobox	One or more choices from a long list, with typing to filter.
Autocomplete	Free text, with suggestions that the user can ignore.
Choicebox	A choice where each option needs a description, such as a plan.
Checkbox	An on or off value in a form that the user submits.
Switch	A setting that applies at once.

Name the group with aria-label or aria-labelledby, and put each radio and its text in a <label>.

Props that the library adds. Every part also takes all the Base UI props.

Prop	Type	Default	Description
keepMounted	boolean	true	Keeps the dot in the DOM when the radio is not selected. The Base UI default is false.