Switch

A control that allows the user to toggle between checked and not checked. Built on top of Radix UI Switch primitive.

Installation

npm install @darksnow-ui/switch

Peer Dependencies

npm install react react-dom

Usage

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

export function SwitchExample() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane mode</Label>
    </div>
  )
}

Props

| Prop | Type | Default | Description | |---------------|-------------------|---------|--------------------------------| | checked | boolean | - | Controlled checked state | | defaultChecked| boolean | false | Default checked state | | onCheckedChange| function | - | Called when checked changes | | disabled | boolean | false | Disables the switch | | name | string | - | Form name attribute | | value | string | "on" | Form value when checked | | id | string | - | HTML id attribute | | className | string | - | Additional CSS classes |

Examples

Basic Switch

<div className="flex items-center space-x-2">
  <Switch id="s1" />
  <Label htmlFor="s1">Enable notifications</Label>
</div>

Controlled Switch

function ControlledSwitch() {
  const [checked, setChecked] = useState(false)

  return (
    <div className="flex items-center space-x-2">
      <Switch 
        id="controlled" 
        checked={checked} 
        onCheckedChange={setChecked} 
      />
      <Label htmlFor="controlled">
        {checked ? "Enabled" : "Disabled"}
      </Label>
    </div>
  )
}

Disabled Switch

<div className="space-y-4">
  <div className="flex items-center space-x-2">
    <Switch id="disabled-off" disabled />
    <Label htmlFor="disabled-off">Disabled (off)</Label>
  </div>
  <div className="flex items-center space-x-2">
    <Switch id="disabled-on" disabled defaultChecked />
    <Label htmlFor="disabled-on">Disabled (on)</Label>
  </div>
</div>

Form Integration

<form>
  <div className="space-y-4">
    <div className="flex items-center space-x-2">
      <Switch id="marketing" name="notifications" value="marketing" />
      <Label htmlFor="marketing">Marketing emails</Label>
    </div>
    <div className="flex items-center space-x-2">
      <Switch id="security" name="notifications" value="security" defaultChecked />
      <Label htmlFor="security">Security updates</Label>
    </div>
  </div>
</form>

Settings Panel

<div className="space-y-6">
  <div>
    <h3 className="text-lg font-medium">Privacy Settings</h3>
    <div className="mt-4 space-y-4">
      <div className="flex items-center justify-between">
        <div className="space-y-1">
          <Label htmlFor="analytics">Analytics</Label>
          <p className="text-sm text-theme-content-muted">
            Help us improve our product by sharing usage data.
          </p>
        </div>
        <Switch id="analytics" />
      </div>
      <div className="flex items-center justify-between">
        <div className="space-y-1">
          <Label htmlFor="marketing">Marketing</Label>
          <p className="text-sm text-theme-content-muted">
            Receive emails about new products and features.
          </p>
        </div>
        <Switch id="marketing" />
      </div>
    </div>
  </div>
</div>

Accessibility

• Full keyboard support (Space and Enter keys)
• Screen reader accessible with proper ARIA attributes
• Focus management and focus indicators
• Supports labeling and descriptions
• Form integration support

Styling

The Switch component uses DarkSnow UI design tokens:

• Track: Background changes between checked/unchecked states
• Thumb: Circular indicator that slides between positions
• Focus: Ring outline on focus
• Disabled: Reduced opacity and disabled cursor
• Transitions: Smooth animations for state changes

States

• Unchecked: bg-theme-mark-light
• Checked: bg-theme-accent
• Disabled: opacity-50 cursor-not-allowed
• Focus: ring-2 ring-theme-accent-sm

Best Practices

1. Always use labels: Associate switches with descriptive labels
2. Clear states: Make it obvious what the switch controls
3. Immediate feedback: Provide immediate visual feedback on toggle
4. Logical defaults: Choose sensible default states
5. Group related switches: Organize related settings together

Related Components

• Checkbox - For binary choices in forms
• Radio Group - For exclusive selections
• Toggle - For toggle buttons