Switch

A toggle control for switching between on and off states.

Installation

tsx
npx @smicolon/smi-ui add switch

Preview

Sizes

With Label & Description

Toggle dark mode on or off

Receive push notifications

States

Usage

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

// Basic switch
<Switch />

// With label
<Switch label="Airplane mode" />

// With description
<Switch
  label="Dark mode"
  description="Toggle dark mode on or off"
/>

// Different sizes
<Switch size="sm" />
<Switch size="default" />
<Switch size="lg" />

// Controlled
const [enabled, setEnabled] = useState(false)
<Switch
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
/>