Choose one option
Use radio buttons when users can select only one item from a set.
Radio allows the user to select one option from a set while seeing all available options.
Use radio buttons when users can select only one item from a set.
Radio groups work well for short lists where users need to compare choices.
The selected state remains visible until users change it.
Radio input
Label
Add hint text to a radio group to explain the choice.
Default. Use when the label alone is enough.
Set the radio group's value to mark a default selection.
No radio is preselected.
Disable individual radios or the whole group to prevent selection.
All options are interactive.
Show error styling and a feedback message when no option is selected.
No feedback shown.
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-form-gap-md—sgds-form-gap-sm—Use a radio group when users must choose exactly one option and seeing all options helps them compare.
Radio groups are mutually exclusive. Use checkboxes when more than one option can apply.
The radio group label should state the decision users are making before they compare the options.
Long radio groups are hard to scan. Use select or combo box when the list is too long to compare at once.
disabled states.TabShift+Tab↓ Downor→ Rightor↑ Upor← LeftSpaceShare them with us on Slack → #ask-sgds-v3
Report it on GitHub Issues → sgds/components/radio
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.