Mutually exclusive choices
Radio buttons enforce a single selection — users pick one option from a defined set, and changing their selection automatically deselects the previous one.
Radio
Radio allows the user to select one option from a set while seeing all available options.
GitHub
components/radio
components/radioStorybook
components/radio
components/radioAll options visible upfront
Unlike a select, all radio options are shown at once — better when the number of choices is small and comparison matters.
Clear confirmation of selection
The selected state is visually distinct and persistent, so users always know what they've chosen before submitting.
1
Group
2
Radio control
3
Label
Group
Radio buttons are presented as a group where users can select exactly one option from a visible set.
Renders a group of radio controls under a shared label. Use when users must choose exactly one option from a set of mutually exclusive choices that are all visible at once.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: form-danger-surface-default under sgds/radio means sgds/radio/form-danger-surface-default.
sgds/radio
sgds/form/danger/surface/defaultsgds/form/gap/mdsgds/form/gap/smsgds/opacity/50When to use
- Use this component to collect or change a specific piece of information in a predictable way.
- Use it when the SGDS control matches the type of response users need to provide.
When not to use
- Do not use this component when another SGDS control would reduce effort or make the choice clearer.
- Do not ask for more information, options, or steps than users need at that point in the task.
Keep the input clear
Use clear labels, predictable values, and a single obvious action for the control.
Do not increase input effort
Too many repeated controls or unclear prompts make form completion slower and less confident.
Built-in accessibility
- Radio buttons render native radio inputs and reflect checked and disabled states.
- Radio groups manage selection across related radio options.
Labels and content
- Use radio buttons when users can choose one option from a set.
- Write labels that make each option distinct.
Focus and interaction
- Keep related radio options inside the same group.
- Place hint and validation text close to the group.
TabShift+Tab↓ Downor→ Rightor↑ Upor← LeftSpaceHave suggestions or feedback?
Share them with us on
Found a bug or issue?
Report it on GitHub
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.