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

Switch

Switch component is used to toggle an on-off or yes-no action.

GitHubGitHub logocomponents/switch
StorybookStorybook logocomponents/switch
DesignUsageAccessibilityUpdates

Purpose

Toggle a setting on or off

Switches represent a binary state — enabled or disabled, on or off — and apply the change immediately without requiring a submit action.

Immediate effect

Unlike a checkbox in a form, a switch takes effect the moment it's toggled — use it when the action should happen right away.

Visible state at all times

The switch's visual position and colour make the current state obvious without needing to read a label.

Anatomy

Enable notifications
1

Switch track

2

Thumb

3

Label

Configuration

Checked state

The switch is a toggle control that visually reflects its on or off state and applies the change immediately.

Enable notifications

Renders a switch in its active state. Use when a setting should take effect immediately without a separate save action — such as enabling notifications or toggling a feature.

Playground

BETA
Enable notifications

Structure

Enable notifications

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: border-color-transparent under sgds/switch means sgds/switch/border-color-transparent.

sgds/switch
CategoryComponent tokenSemantic tokenValueBorderborder-color-transparentsgds/border-color-transparent—Typographyfont-size-14sgds/font-size/14—font-size-20sgds/font-size/20—Formform-border-radius-fullsgds/form/border-radius/full—form-border-width-defaultsgds/form/border-width/default—form-gap-lgsgds/form/gap/lg—form-height-2-xssgds/form/height/2-xs—form-height-lgsgds/form/height/lg—form-height-mdsgds/form/height/md—form-height-smsgds/form/height/sm—form-padding-inline-smsgds/form/padding-inline/sm—form-primary-surface-defaultsgds/form/primary/surface/default—form-primary-surface-emphasissgds/form/primary/surface/emphasis—form-surface-emphasissgds/form/surface/emphasis—form-surface-subtlesgds/form/surface/subtle—form-width-2-xssgds/form/width/2-xs—form-width-3-xlsgds/form/width/3-xl—form-width-mdsgds/form/width/md—

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

Enable notifications
Keep the input clear

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

Enable notifications Enable notifications
Do not increase input effort

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

Accessibility considerations

Built-in accessibility

  • Switches render native checkbox inputs with switch styling.
  • The component reflects checked and disabled states.

Labels and content

  • Use switch for settings that take effect immediately.
  • Use a label that describes the setting, not the current state only.

Focus and interaction

  • Users should be able to reach the switch in form order.
  • Keep any status text close to the switch it describes.

Keyboard interaction

KeyInteractionTabMoves focus from the switch to the next focusable element.Shift+TabMoves focus to the previous interactive element.EnterActivates the focused switch.SpaceActivates the focused switch.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for switchPlannedTBD

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/switch

Singapore Government Design System

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