Allow multiple selections
Checkboxes let users select any combination of options from a list — ideal when more than one answer is valid.
Checkbox
Checkbox component is used when you require users to select multiple items from a list.
GitHub
components/checkbox
components/checkboxStorybook
components/checkbox
components/checkboxMake selections visible
Checked and unchecked states are immediately visible, so users can review their choices at a glance before submitting.
Support grouped choices
Group related checkboxes under a shared label to help users understand what they're selecting within a broader category.
1
Group container
2
Checkbox control
3
Label
Group
Checkboxes are grouped under a shared label so users can select multiple options from the same category.
Displays a group of related checkboxes under a shared label. Use when users may select more than one option from the same category.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: border-color-transparent under sgds/checkbox means sgds/checkbox/border-color-transparent.
sgds/checkbox
sgds/border-color-transparentsgds/font-size/16sgds/font-weight/regularsgds/form/border-radius/mdsgds/form/border-width/defaultsgds/form/color/defaultsgds/form/danger/surface/defaultsgds/form/gap/mdsgds/form/gap/smsgds/form/padding-inline/smsgds/form/primary/surface/defaultsgds/form/primary/surface/emphasissgds/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
- Checkboxes render native checkbox inputs and reflect checked, disabled, and invalid states.
- Checkbox groups provide shared label, hint, and feedback areas.
Labels and content
- Write labels that describe the choice clearly.
- Use checkbox groups when users may select more than one option.
Focus and interaction
- Users should be able to move through each checkbox and its feedback text in order.
- Keep related checkboxes inside the same group when they answer one question.
TabShift+TabEnterSpaceHave 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.