Choose from a list
Use select when users need to pick one option from a known set.
Select is used to make one selection from a list through keyboard or mouse actions.
Use select when users need to pick one option from a known set.
A select keeps many options inside one field when radio buttons would be too long.
The select supports standard field, option, and keyboard interaction patterns.
Trigger field
Listbox
Option
Use hint text to clarify the choice.
Default. Use when the label alone is enough.
Provide a placeholder to indicate that no value has been selected yet.
Field is empty with no inline helper.
Use the value attribute to mark a default selection.
No option is preselected.
Disable individual options to prevent users from selecting them.
Every option is selectable.
Disable the entire select to prevent any interaction.
Default interactive state.
Show error styling and a feedback message when no value is selected.
No feedback shown.
Use loading while select options are being retrieved or refreshed.
Use default when options are ready.
Mark select as required when the form cannot be submitted without a selected option.
Use optional selects for non-essential choices.
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-gap-xs8pxsgds-form-border-radius-md—sgds-form-border-width-defaultWidth variessgds-dimension-4848pxsgds-icon-size-md—sgds-form-outline-focus—sgds-form-outline-offset-focus—Use select when users must pick one value from a defined set, especially when radios would crowd the page.
If there are only two or three options, show them as radio buttons so users can compare and pick without opening a menu.
Set a placeholder so users can tell the field is empty and that they still need to make a choice.
If the list is long and users know the value, use a combo box so they can filter by typing.
Sort options alphabetically, by frequency, or by recommended order so users can find their choice quickly.
Select only supports a single value. For more than one, use a combo box with multiSelect or checkboxes.
TabShift+Tab↓ Downor↑ UpEnterEscShare them with us on Slack → #ask-sgds-v3
Report it on GitHub Issues → sgds/components/select
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.