RadioButton

When to use

Use when there are two or more mutually exclusive options and the user must select exactly one. Radio buttons make all options visible for easy comparison. preferred over dropdowns when space allows.

When not to use

For more than 5 options, use Select to save space. For binary toggles with immediate effect, use ToggleSwitch. For multiple selections, use Checkbox.

Guidelines

• Always have a default: One radio button must be pre-selected. Users cannot deselect all options.
• Vertical layout: One option per line for clear scanning.
• Clickable labels: Let users click either the radio button or its label.

How it works

Selected: grid