Skip to main content

Switch

A switch is an interactive element that allows users to switch between two states or options with a single action.

Overview

The purpose of switches is to offer users a quick and straightforward method to switch between two distinct options or states. Switches enhance the user experience by providing a clear and efficient way to make selections or enable/disable functionality.

Switches are commonly used to enable or disable settings, switch between modes or perform binary actions in user interfaces. When users interact with switches, they change their appearance to indicate the current state or selection.

A switch that is currently in the off position, with a label positioned to the left.

Dos and Don’ts

Do
  • Use switches to trigger actions that have an immediate effect, such as turning dark mode on and off.
Don't
  • Don’t use a switch to trigger actions that don’t have immediate effect. In that scenario use a checkbox instead.

Anatomy

Anatomy of a switch.
  1. Label (Optional): Maximum of one label. Provides necessary context to a form.
  2. Handle: Positioned to the right when the switch is turned on, and to the left when turned off.
  3. Check icon: Provides additional feedback when the switch is turned on.

Modifiers

Labels

Labels can be removed in certain use cases, but is advised against due to accessibility reasons. In instances where there is no label, it is recommended that a ‘hidden label’ is embedded into the code for screen readers to announce.

Switches can have their label placed to the left or the right of the switch.

Left

A switch with its label placed to the left.
A switch with its label placed to the right.

States

The switch has two states available, unselected and selected.

LTR

Selected

A selected switch with LTR orientation.

Unselected

An unselected switch with LTR orientation.

RTL

Selected

A selected switch with RTL orientation.

Unselected

An unselected switch with RTL orientation.

Content

Labels

  • Keep labels short so forms are easy to read and scan.
  • Use sentence case.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

Default state of a switch.

Hover

A switch that is hovered.

Active

A switch that is active.

Focus

A switch that is focused.

Disabled

A switch that is disabled.

Examples

Outlines the atomic level interactive elements for the component.

LTR examples

Here are some examples of switches in left-to-right context:

A left to right example of switch with default state.
A left to right example of switch with hover state.

RTL examples

Here are some examples of switches in right to left context:

A right to left example of switch with default state.
A right to left example of switch with hover state.

Resources

Figma Component
 Stable
Figma Documentation
 Stable
Web Components
 Alpha
Vue [Fozzie]
 Stable
React [Snacks]
 Stable
iOS JustUI [UI Kit]
 Stable
iOS PIE [SwiftUI]
 Stable
Android PIE [Compose & Views]
 Stable