Switch

A toggle switch component built with Headless UI for boolean settings.

Import

import { Switch } from '@/components/ui';

Basic Usage

'use client';
import { useState } from 'react';
import { Switch } from '@/components/ui';

export function Example() {
  const [enabled, setEnabled] = useState(false);

  return (
    <Switch
      checked={enabled}
      onChange={setEnabled}
    />
  );
}

Props

Prop Type Default Description
checked boolean required Whether switch is on
onChange (checked: boolean) => void required Change handler
label string - Label text
description string - Description text below label
disabled boolean false Disable switch
className string - Additional CSS classes

With Label

<Switch
  checked={enabled}
  onChange={setEnabled}
  label="Enable notifications"
/>

With Label and Description

<Switch
  checked={enabled}
  onChange={setEnabled}
  label="Dark Mode"
  description="Enable dark mode for the application"
/>

Disabled State

<Switch
  checked={enabled}
  onChange={setEnabled}
  label="Feature Flag"
  disabled
/>

Settings Example

'use client';
import { useState } from 'react';
import { Switch, Card, CardHeader, CardTitle, CardContent } from '@/components/ui';

export function NotificationSettings() {
  const [settings, setSettings] = useState({
    emailNotifications: true,
    pushNotifications: false,
    weeklyDigest: true,
    marketingEmails: false,
  });

  const updateSetting = (key) => (value) => {
    setSettings({ ...settings, [key]: value });
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Notification Settings</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        <Switch
          checked={settings.emailNotifications}
          onChange={updateSetting('emailNotifications')}
          label="Email Notifications"
          description="Receive notifications via email"
        />
        <Switch
          checked={settings.pushNotifications}
          onChange={updateSetting('pushNotifications')}
          label="Push Notifications"
          description="Receive push notifications in your browser"
        />
        <Switch
          checked={settings.weeklyDigest}
          onChange={updateSetting('weeklyDigest')}
          label="Weekly Digest"
          description="Get a weekly summary of activity"
        />
        <Switch
          checked={settings.marketingEmails}
          onChange={updateSetting('marketingEmails')}
          label="Marketing Emails"
          description="Receive product updates and promotions"
        />
      </CardContent>
    </Card>
  );
}

Comparison: Switch vs Checkbox

Use Case Component
Toggle settings on/off Switch
Agree to terms Checkbox
Multiple selections Checkbox
Feature toggle Switch
Form field (boolean) Switch or Checkbox

Styling

The Switch uses the primary color when enabled: