What is Toggle switch?

A toggle switch turns one thing on or off: notifications, dark mode, a feature flag, public visibility. The thumb slides across a track and the change takes effect at once. That immediacy is what distinguishes a switch from a checkbox. A checkbox is a value you submit with a form; a switch is a setting you flip. Phones made the control familiar, and settings pages on the web adopted it for the same reason: the state is obvious from the position of the thumb.

Switch or checkbox

• Use a switch when the change applies instantly, the state is binary and the options are clearly on and off.
• Use a checkbox inside a form that is submitted with a button, for agreeing to terms, and whenever several related options are selected together.
• Use neither for choosing between two named things like Light and Dark with no obvious on state; that is a segmented control or a radio group.
• A switch that does nothing until the user presses Save confuses people. If saving must be explicit, use checkboxes.

Accessibility

The switch pattern is small. The control is a button with role="switch" and aria-checked set to true or false, or a native <input type="checkbox" role="switch">, which keeps form behavior. It needs an accessible name from a visible label, and clicking the label should toggle it. Space toggles the switch; many implementations also accept Enter. Screen readers announce the state as on or off, so the label should name the thing, such as "Email notifications", not the state.

• Show the state in more than one way: thumb position plus a track color, an icon or an On and Off caption. Color alone fails for many users.
• Give the control a 44 by 44 pixel hit area even when the drawn track is smaller.
• When flipping triggers a request, keep the switch focusable, show a small spinner in the thumb, and revert with a message if the request fails, as optimistic UI demands.
• Keep the motion short and skip it under prefers-reduced-motion.

How to build one in React

MiniDev's Switch wraps the Base UI switch, so the role, state and keyboard handling are wired. The label and description props render a settings row where the whole row is clickable, and loading shows a spinner while a save is in flight:

"use client"
import * as React from "react"
import { Switch } from "@/components/ui/switch"

export function NotificationRow({ initial, save }: { initial: boolean; save: (on: boolean) => Promise<void> }) {
  const [on, setOn] = React.useState(initial)
  const [saving, setSaving] = React.useState(false)
  async function change(next: boolean) {
    setOn(next)
    setSaving(true)
    try {
      await save(next)
    } catch {
      setOn(!next)
    } finally {
      setSaving(false)
    }
  }
  return (
    <Switch
      checked={on}
      onCheckedChange={change}
      loading={saving}
      label="Email notifications"
      description="A daily digest of activity in your workspace."
    />
  )
}

The thumb leans toward where it is about to go while pressed and springs across on release, one of the micro-interactions that make a setting feel direct. For a one-line flag with an environment badge, see FeatureFlagToggle. More inputs are in the forms category.