Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Select

Select is used to make one selection from a list through keyboard or mouse actions.

GitHubGitHub logocomponents/select
StorybookStorybook logocomponents/select
DesignUsageAccessibilityUpdates

Purpose

Choose from a defined list

Select is the right choice when users must pick one option from a known set — especially when the list is too long to show as radio buttons.

Compact for long lists

A select dropdown collapses a list of options into a single row, keeping the form layout tight when there are many choices.

Familiar and accessible

Select uses the native browser control as a fallback, ensuring it works reliably across platforms and is fully operable by keyboard and assistive technologies.

Anatomy

PassportLicenceBenefits
1

Trigger field

2

Listbox

3

Option

Configuration

Default

The select component presents a collapsed dropdown for choosing one value from a predefined list.

Passport Licence Benefits

Renders a dropdown field for choosing one option from a known list. Use when the list is too long for radio buttons but the user must pick from a constrained set.

Playground

BETA
Passport Licence Benefits

Structure

Passport Licence Benefits

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: padding-lg under sgds/select means sgds/select/padding-lg.

sgds/select
CategoryComponent tokenSemantic tokenValuePaddingpadding-lgsgds/padding/lg20pxGapgap-smsgds/gap/sm12pxBorderborder-color-mutedsgds/border-color-muted#DFDFDFborder-radius-mdsgds/border-radius/md8pxborder-width-1sgds/border-width/11pxColourcolor-defaultsgds/color-default#1A1A1Asurface-defaultsgds/surface-default#FFFFFF

Usage

When 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.

Best practices

Passport Licence Benefits
Keep the input clear

Use clear labels, predictable values, and a single obvious action for the control.

Option 1 Option 2 Option 3
Do not increase input effort

Too many repeated controls or unclear prompts make form completion slower and less confident.

Accessibility considerations

Built-in accessibility

  • Select combines an input-like trigger with a selectable option menu.
  • The menu supports keyboard opening, movement, and selection.

Labels and content

  • Use a visible label that describes the choice.
  • Keep option labels short and unique.

Focus and interaction

  • Users should be able to open the option list and select an item without a pointer.
  • Keep validation feedback close to the select.

Keyboard interaction

KeyInteractionTabMoves focus from the select to the next focusable element.Shift+TabMoves focus to the previous interactive element.↓ Downor↑ UpOpens the select menu or moves focus between available options.EnterActivates the focused focused option.EscCloses the open select when supported by the component.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for selectPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/select

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.