Switch

Demo

Also known as

• Toggle — Carbon Design System
• Toggle switch — Open UI

How to recognize it

A pill-shaped track with a round knob. The knob slides to one end and the track changes color when it is on.

Behavior

• Clicking anywhere on the switch or its label flips the state.
• There are only two states, on and off; unlike a checkbox, there is no mixed state.
• The label names the setting and does not change when the state changes.
• This demo is a native checkbox with role="switch", styled to look like a switch.

Keyboard

Usage notes

• Use it only for settings that take effect immediately. If a save or submit step is needed, use a checkbox.

Similar components

• Checkbox: A switch takes effect right away; a checkbox is often confirmed later with a submit button.
• Toggle button: A switch looks like a sliding knob and is used for settings; a toggle button looks like a button and is often used in toolbars.

Sources

• WAI-ARIA APG: Switch Pattern (Last checked: 2026-10-20)
• Open UI: Switch Element (Explainer) (Last checked: 2026-10-20)
• Carbon Design System: Toggle (Last checked: 2026-10-20)
• デジタル庁デザインシステムウェブサイト「スイッチ」をもとに作成 (Last checked: 2026-10-20)