Shadcn Switch Components

Shadcn Switch Component

The Shadcn Switch is a toggle control that turns a single setting on or off, like the switches in your phone's settings app. It communicates an immediate change of state: dark mode, email notifications, two factor authentication or a feature flag, and it is one of the most common controls on settings and preferences pages.

Settings rows, icon labels and segmented toggles in this collection are built with shadcn/ui, React and Tailwind CSS. Each one works with both Radix UI and Base UI switch primitives. Alongside the basic labelled toggle there are colored, square and Material style switches, theme toggles with sun and moon icons and a clickable settings card, all with dark mode support.

What is the Shadcn Switch Component?

A switch is a button with the switch role and a sliding thumb. Clicking it, or pressing Space while it has focus, flips its checked state, and the primitive exposes that state through aria-checked and data attributes you can style. When it has a name inside a form, a hidden input submits its value just like a checkbox.

Use a switch when the change takes effect immediately, without a Save button. When the choice is only applied after submitting a form, or when users pick several items from a list, a Checkbox is the better fit. For a pressed or unpressed button in a toolbar, such as Bold, use a Toggle, and for choosing one of several options, use a Radio Group.

Anatomy of the Shadcn Switch

10 Shadcn Switch Variants

Each switch variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic with label: A switch paired with a clickable label, the standard pattern for settings like Airplane Mode.
• Custom color: Overrides the primary and ring CSS variables on a wrapper to give one switch its own accent color.
• Square and slim: A switch with squared off corners on both the track and the thumb, and a slim Material style track with a larger round thumb that overhangs it.
• With state text: A controlled switch whose label reads On or Off to match the current state.
• Icon labels: Moon and sun icons on each side of the switch that highlight the active side and can be clicked to pick that side, ideal for theme toggles.
• Segmented toggle: A wide, two part switch with moon and sun icons or On and Off text inside, where the thumb slides under the active half. One version slides the icon along with the thumb, another uses square corners.
• Card with description: A bordered card with a small switch, a label, a sublabel and a description, where clicking anywhere on the card toggles it.

How to Install the Shadcn Switch Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a switch variant by its name:

npx shadcn@latest add @shadcnuikit/switch1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Switch Component

Import the switch from your components/ui folder and pair it with a Label whose htmlFor matches the switch's id. Use checked and onCheckedChange to control it.

"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

export function EmailNotifications() {
  const [enabled, setEnabled] = React.useState(true)

  return (
    <div className="flex items-center justify-between gap-4">
      <Label htmlFor="email-notifications">Email notifications</Label>
      <Switch
        id="email-notifications"
        checked={enabled}
        onCheckedChange={setEnabled}
      />
    </div>
  )
}

Why Use the Shadcn Switch Component

• Instant feedback: The sliding thumb and color change make the new state obvious the moment users click.
• Accessible semantics: The switch role, aria-checked and keyboard support come from the primitive.
• Form ready: With a name, the switch submits its value through a hidden input, like a native checkbox.
• Two sizes: size="sm" fits dense lists and cards, the default size suits standalone settings.
• Easy to restyle: Checked and unchecked states are data attributes, so color, shape and size are plain Tailwind classes.

Common Switch Use Cases

• Settings pages: Turn notifications, privacy options or integrations on and off.
• Theme toggles: Switch between light and dark mode with sun and moon icons.
• Feature flags: Enable beta features or experiments from an admin panel.
• Pricing pages: Toggle between monthly and yearly billing.
• Security options: Enable two factor authentication or login alerts.
• Table rows: Activate or deactivate users, products or API keys inline.

Customizing the Shadcn Switch

The track uses bg-primary when checked and a translucent bg-input when unchecked, so the simplest way to recolor a single switch is to override the --primary variable on a wrapper, as the colored variant does. Shape and size are classes on the switch itself, and the thumb can be targeted with a *:data-[slot=switch-thumb] selector. For a global change, adjust your theme tokens with the free Theme Generator.

For example, this makes a small square switch:

<Switch
  size="sm"
  className="rounded-md *:data-[slot=switch-thumb]:rounded-sm"
/>

Switch Accessibility and Keyboard Support

The switch follows the WAI-ARIA switch pattern: it is a button with role="switch" and aria-checked. Every switch needs an accessible name, either a visible label connected with htmlFor or an aria-label. When the label is visually hidden, as in the segmented variants, keep it in the markup with a screen reader only class.

Use aria-describedby to connect a longer description, as the card variant does, and avoid relying on the track color alone to show the state: icons or On and Off text help users with low color perception.

Switch Best Practices

• Use a switch only for settings that apply immediately; use a checkbox in forms that need a Submit button.
• Write the label as the setting name, like Email notifications, not as a question or an action.
• Keep the label on the same row and make it clickable so users do not have to hit the small track.
• Do not change the meaning of the label based on the state; the switch position already shows it.
• Show a loading or disabled state if toggling triggers a slow request, and roll back on errors.
• Group related switches in a Card with a short heading and descriptions.

Components Related to Switch

Shadcn Switch FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.