Creative Tim UICreative Tim UI

Shadcn Switch

PreviousNext

A toggle switch component that allows users to turn an option on or off, perfect for settings, preferences, and feature toggles.

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

export function SwitchDemo() {
  return <Switch />
}

Installation

pnpm dlx @creative-tim/ui@latest add switch

Usage

import { Switch } from "@/components/ui/switch"
<Switch />

Examples

Switch Colors

Switch components with different color schemes (primary, secondary, info, success, warning, error) to visually distinguish between different switch states and provide visual variety.

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

export function SwitchColors() {
  return (
    <div className="flex flex-wrap justify-center gap-4">
      <Switch className="data-[state=checked]:bg-primary" />
      <Switch className="data-[state=checked]:bg-secondary" />
      <Switch className="data-[state=checked]:bg-blue-500" />
      <Switch className="data-[state=checked]:bg-green-500" />
      <Switch className="data-[state=checked]:bg-yellow-500" />
      <Switch className="data-[state=checked]:bg-destructive" />
    </div>
  )
}

Switch Checked

A switch component that is checked by default, useful for pre-selecting options or displaying the current state of a setting.

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

export function SwitchChecked() {
  return <Switch defaultChecked />
}

Disabled Switch

A disabled switch that cannot be interacted with, useful for displaying read-only settings or temporarily restricting user interaction.

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

export function DisabledSwitch() {
  return <Switch disabled />
}

Switch with Label

A switch component with an associated label that provides clear context and improves accessibility by properly linking the label to the switch.

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

export function SwitchWithLabel() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="switch" />
      <Label htmlFor="switch" className="text-foreground cursor-pointer">
        Dark Mode
      </Label>
    </div>
  )
}

Switch with Description

A switch component with a label and descriptive text that provides additional context and guidance to help users understand what the switch controls.

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

export function SwitchWithDescription() {
  return (
    <div className="flex gap-4">
      <Switch id="switch-description" />
      <Label
        htmlFor="switch-description"
        className="flex -translate-y-0.5 cursor-pointer flex-col items-start text-left"
      >
        <span className="font-semibold">Remember Me</span>
        <span className="text-foreground text-sm font-normal">
          You&apos;ll be able to login without password for 24 hours.
        </span>
      </Label>
    </div>
  )
}

Switch with Link

A switch component with a label that includes a clickable link, perfect for terms and conditions, privacy policies, or related documentation.

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

export function SwitchWithLink() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="switch-link" />
      <Label htmlFor="switch-link" className="text-foreground cursor-pointer">
        I agree with the{" "}
        <a href="#" className="text-primary inline underline">
          terms and conditions
        </a>
      </Label>
    </div>
  )
}

Custom Switch

A switch component with custom styling that demonstrates how to personalize the appearance to match your brand or design requirements.

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

export function CustomSwitch() {
  return (
    <Switch className="border-2 data-[state=checked]:border-[#2ec946] data-[state=checked]:bg-[#2ec946]" />
  )
}

Props

The switch component is built using Radix UI's Switch primitive and accepts the following props:

Switch

PropTypeDefaultDescription
checkedboolean-The controlled checked state of the switch
defaultCheckedboolean-The default checked state of the switch (uncontrolled)
onCheckedChange(checked: boolean) => void-Event handler called when the checked state changes
disabledbooleanfalseWhen true, prevents the user from interacting with the switch
requiredbooleanfalseWhen true, indicates that the switch must be checked
namestring-The name of the switch when used in a form
valuestring-The value of the switch when used in a form
classNamestring-Additional CSS classes to apply to the switch

Accessibility

The switch component follows accessibility best practices:

  • Uses proper ARIA attributes for screen readers
  • Supports keyboard navigation (Space to toggle)
  • Focus states are clearly visible for keyboard users
  • Disabled state is properly communicated to assistive technologies
  • Works with form labels using htmlFor and id attributes
  • Maintains proper semantic HTML structure

Best Practices

  • Use switches for binary on/off choices (settings, preferences, feature toggles)
  • Provide clear labels that describe what the switch controls
  • Use descriptive text when the switch's purpose might not be immediately clear
  • Consider using defaultChecked for common or recommended settings
  • Use disabled state to show unavailable options without hiding them
  • Ensure sufficient contrast between checked and unchecked states
  • Test keyboard navigation and screen reader compatibility
  • Group related switches together for better organization

The switch component provides a clean and accessible way to create toggle controls. It's ideal for settings panels, preference forms, feature toggles, and any interface where users need to enable or disable options.