Design System Builder

Switch

Switch is a component component that provides switch functionality.

Active

Examples

size

Different size options for the Switch component.

sm

md

lg

Installation

npm install @your-design-system/switch
import { Switch } from "@/components/ui/switch"

export function SwitchDemo() {
  return (
    <Switch size="md">
      {/* Content */}
    </Switch>
  )
}

API Reference

PropTypeDefaultDescription
checkedboolean-

The checked prop for the component.

disabledboolean-

Whether the component is disabled.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

peerinline-flexshrink-0cursor-pointeritems-centerrounded-fullborder-2border-transparenttransition-colorsfocus-visible:outline-nonefocus-visible:ring-2focus-visible:ring-ringfocus-visible:ring-offset-2focus-visible:ring-offset-backgrounddisabled:cursor-not-alloweddisabled:opacity-50data-[state=checked]:bg-primarydata-[state=unchecked]:bg-input

size Variants

sm

h-4w-7

md

h-6w-11

lg

h-7w-12

Design System Compliance

This component is validated against atomic design principles and foundation token usage.