Library / UI components / Toggle
No. 015·noun·also called switch, on/off switch

Toggle

A little sliding switch for turning one setting on or off, which takes effect right away.

SPECIMEN · LIVE DEMO
Definition

What it is

A toggle is a two-state switch, like a light switch: flip it and the setting changes immediately. It's the clearest control for anything that is simply on or off.

Use toggles for settings that apply instantly: notifications, dark mode, "show archived". If a change only happens after pressing Save, a checkbox is the better fit.

A toggle is for one on/off choice. For one choice from several, use a dropdown or radio buttons.

Say it like a builder

How to ask for it

Vague

“Let people turn email notifications on and off.”

Precise

“Add an "Email notifications" toggle in Settings that saves immediately when flipped, with a brief "Saved" toast. It should be on by default for new users.”

Why it works

"Turn on and off" could be a checkbox inside a form with a Save button; "toggle" implies an instant switch and the prompt sets the default.

In the wild

You've seen this in

  • IWi-Fi and Bluetooth in iPhone Settings
  • SNotification settings in Slack
  • MThe "Show archived" switch in many dashboards
Usage note

Often confused with

DropdownA dropdown picks one of many; a toggle flips one thing on or off.BadgeA badge only displays status; a toggle changes it.