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

Components

AccordionAlertBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

Switch

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

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Toggle a setting

Use switches for binary settings such as on or off.

Apply changes on toggle

A switch takes effect when users change it.

Show the current state

The thumb position and colour help users see whether the setting is on or off.

Anatomy

Enable notifications
1

Switch

2

Label

Configuration

Checked

The switch reflects its on or off state visually and applies the change immediately.

Enable notifications

Renders the switch in its active on state. Use when a setting should take effect immediately without a separate save action.

Size

Switch sizes let you match the toggle to the density of the surrounding layout.

Enable notifications

The default size. Use in most form layouts and settings panels.

Icon

An optional icon inside the switch thumb reinforces the on or off state.

Enable notifications

The default. Use when the switch position alone is sufficient to communicate the state.

Disabled

Use the disabled state to prevent toggling when the setting is not available in the current context.

Enable notifications

The default. Switches are interactive and can be toggled by the user.

Label placement

Switch labels can sit on the default side or in the left label slot depending on the form layout.

Receive updates

Use the default label position for simple stacked forms.

Structure

Enable notifications

Design tokens used

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.

CategoryTokenValueWhere it's usedBordersgds-form-border-width-defaultWidth variesBorder of the form check inputOutlinesgds-outline-focus—Focus outline of the form check input when keyboard-focusedsgds-outline-offset-focus—Focus-outline offset of the form check input when keyboard-focusedBordersgds-form-border-radius-full—Corner radius of the form check inputSizesgds-form-height-mdHeight variesHeight of the form check inputsgds-form-width-xsWidth variesWidth of the toggle indicator iconsgds-form-width-xlWidth variesWidth of the form check inputsgds-switch-heightHeight variesHeight of the form check inputsgds-switch-widthWidth variesWidth of the form check input

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
Use a switch for settings that take effect immediately

Use a switch when toggling should change the system right away, like turning on notifications.

Receive monthly newsletter
Do not use a switch inside a form that needs Save

If the change only takes effect after submission, use a checkbox so the convention matches pending-save.

Enable two-factor authentication
Use a positive, action-led label

Phrase the label as the on-state behaviour, Enable two-factor authentication, so the result is clear.

On
Do not use ambiguous on or off labels

Avoid labels like On or Yes. The label should describe the setting that the switch controls.

Enable dark mode
Add the icon prop when the state needs to be unmistakable

Use the icon prop to show a check or cross inside the thumb when users need a cue beyond colour.

Notification frequency
Do not use a switch when there are more than two states

A switch is binary. For more than two values (Off, Low, High), use radio buttons or a select instead.

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

DateVersionDescription04 Apr 2025v3.0.0- **Switch** – A toggle switch component for binary states.

Roadmap

Planned itemStatusTargetFuture enhancements for switchPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

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.

Past VersionsSGDS v1SGDS v2