Radio Button

Radio buttons allow users to select exactly one option from a set. Unlike checkboxes, selecting one automatically deselects others. Prizma radios are always used in groups of two or more.

Try it live

Pick one — real radio inputs styled with the radio tokens.

Interactive — select one

Use my camera Upload a file

States

Selected

Selected.radio.is-selected

The chosen option. The knob fills with brand color.

Unselected

Unselected.radio

Available but not chosen. Selecting it automatically deselects the others in the group.

Disabled

Disabledopacity: 0.4

Unavailable option, shown muted and non-interactive.

Tokens

TokenRoleLayer

--radio-surface-defaultUnselected backgroundComponent

--radio-surface-selectedSelected backgroundComponent

--radio-surface-disabledDisabled backgroundComponent

--radio-border-defaultUnselected borderComponent

--radio-border-selectedSelected borderComponent

--radio-border-disabledDisabled borderComponent

--radio-dot-colorInner dot colorComponent

Component tokens

The color tokens for this component live in Color → Tokens, and its spacing, radius, and type map to the shared foundation scales.