Skip to content

Toggles & Switches

On/off switches and toggle buttons.

3 component(s)

Settings Toggles with Description – Tailwind CSS toggles & switches preview

Settings Toggles with Description

Tailwind CSS settings panel with accessible switches, label descriptions, a locked required option, restore defaults and an auto-save status message.

Tailwind CSS Toggles & Switches
Day/Night Toggle – Pure CSS toggles & switches preview

Day/Night Toggle

Animated pure CSS day and night toggle switch where the sun turns into a cratered moon, clouds drift away and stars appear.

Pure CSS Toggles & Switches
iOS Style Toggle Switch – Pure CSS toggles & switches preview

iOS Style Toggle Switch

Pure CSS iOS style toggle switches built on real checkboxes, in a grouped settings list with three sizes, five colors and a disabled state.

Pure CSS Toggles & Switches

What is a toggle switch?

A toggle switch is an on/off control that looks like a physical switch. It is used for settings that take effect immediately, such as enabling notifications, dark mode, or a feature flag. This category also covers toggle buttons and segmented on/off controls, for example a monthly and yearly billing toggle on a pricing page.

When to use a switch

  • For binary settings that apply instantly, without a save button.
  • In settings pages and preference panels with many independent options.
  • For view toggles such as "show archived" or "compact mode".
  • Use a checkbox instead when the value is only applied after submitting a form.

Best practices

  • Build switches on a native <input type="checkbox"> with role="switch", or a <button> with role="switch" and aria-checked.
  • Always provide a visible label that describes the setting, not the state. "Email notifications" is better than "On".
  • Show the state with more than colour: knob position, an icon or on/off text inside the track.
  • Make the hit area at least 44 by 24 pixels and let users click the label too.
  • Keep a clear :focus-visible style; custom switches often lose the default outline.
  • Animate the knob with transform for smooth performance, and reduce or remove motion under prefers-reduced-motion.
  • If the change is saved to a server, give feedback when it succeeds or fails.

Framework versions

The toggle switch examples here include simple switches, switches with icons and labels, large mobile-friendly switches and pricing toggles. Bootstrap 6 versions use theme-* colour roles for the active track. Bootstrap 5 versions use .form-switch with .form-check-input, Tailwind CSS versions use peer and peer-checked: variants, and the pure CSS toggle switch versions need no JavaScript. Use the live preview to compare them, then copy or download the HTML and CSS and rename the labels for your settings.