Switch

Toggle switch component for boolean values with smooth animations and customizable styling.

Basic Usage

import { Switch } from '@akitectio/aki-ui'

function BasicSwitch() {
  return (
    <div className="space-y-4">
      <Switch />
      <Switch defaultChecked />
      <Switch label="Enable feature" />
      <Switch label="Disabled switch" disabled />
      <Switch label="Disabled checked" disabled checked />
    </div>
  )
}

Controlled Component

Controlled switch

Enable notifications

Dark mode

Feature enabled: No

Notifications: On

Dark mode: Off

import { useState } from 'react'
import { Switch } from '@akitectio/aki-ui'

function ControlledSwitch() {
  const [isEnabled, setIsEnabled] = useState(false)
  const [notifications, setNotifications] = useState(true)
  const [darkMode, setDarkMode] = useState(false)

  return (
    <div className="space-y-4">
      <Switch
        label="Controlled switch"
        checked={isEnabled}
        onChange={setIsEnabled}
      />
      <Switch
        label="Enable notifications"
        checked={notifications}
        onChange={setNotifications}
      />
      <Switch
        label="Dark mode"
        checked={darkMode}
        onChange={setDarkMode}
      />
      <div>
        <div>Feature enabled: {isEnabled ? 'Yes' : 'No'}</div>
        <div>Notifications: {notifications ? 'On' : 'Off'}</div>
        <div>Dark mode: {darkMode ? 'On' : 'Off'}</div>
      </div>
    </div>
  )
}

Colors

<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
  <Switch label="Primary" color="primary" defaultChecked />
  <Switch label="Secondary" color="secondary" defaultChecked />
  <Switch label="Success" color="success" defaultChecked />
  <Switch label="Danger" color="danger" defaultChecked />
  <Switch label="Warning" color="warning" defaultChecked />
  <Switch label="Info" color="info" defaultChecked />
</div>

Sizes

Small switch

Medium switch

Large switch

<div className="space-y-4">
  <Switch label="Small switch" size="sm" defaultChecked />
  <Switch label="Medium switch" size="md" defaultChecked />
  <Switch label="Large switch" size="lg" defaultChecked />
</div>

Label Position

Label on the right (default)

Label on the left

<div className="space-y-4">
  <Switch label="Label on the right (default)" labelPosition="right" />
  <Switch label="Label on the left" labelPosition="left" />
</div>

Common Use Cases

// Settings Panel
<div className="space-y-6">
  <div className="bg-white p-4 rounded-lg border">
    <h3 className="text-lg font-semibold mb-3">User Preferences</h3>
    <div className="space-y-3">
      <Switch label="Enable email notifications" defaultChecked />
      <Switch label="Auto-save drafts" defaultChecked />
      <Switch label="Show online status" />
      <Switch label="Enable two-factor authentication" />
    </div>
  </div>

  <div className="bg-white p-4 rounded-lg border">
    <h3 className="text-lg font-semibold mb-3">Feature Toggles</h3>
    <div className="space-y-3">
      <Switch label="Beta features" color="warning" />
      <Switch label="Advanced mode" color="info" />
      <Switch label="Developer tools" color="secondary" />
    </div>
  </div>
</div>

API Reference

Prop	Type	Default	Description
checked	boolean	-	Whether the switch is checked (controlled)
defaultChecked	boolean	false	Default checked state (uncontrolled)
onChange	(checked: boolean) => void	-	Called when the switch state changes
disabled	boolean	false	Whether the switch is disabled
size	'sm' \| 'md' \| 'lg'	'md'	Size of the switch
label	string	-	The label to display next to the switch
labelPosition	'left' \| 'right'	'right'	Position of the label relative to the switch
color	'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info'	'primary'	Color of the switch when checked
className	string	-	Additional CSS classes

Accessibility

✅ Full keyboard navigation support
✅ Screen reader compatible with proper ARIA attributes
✅ Supports focus management
✅ High contrast mode support
✅ Clear on/off state indication

Keyboard Navigation

Space - Toggle switch state
Enter - Toggle switch state
Tab - Move focus to next focusable element
Shift + Tab - Move focus to previous focusable element

Best Practices

✅ Do

Use switches for binary state changes that take effect immediately
Use clear and descriptive labels
Group related switches logically
Use consistent sizing throughout your application
Provide visual feedback for state changes
Use appropriate colors to convey meaning (success, danger, etc.)

❌ Don't

Use switches for actions that require confirmation
Use switches when the change doesn't take effect immediately
Make labels ambiguous about what the switch controls
Use switches for multiple choice selections
Disable switches without explanation

When to Use Switch vs Checkbox

Use Switch When:

• The change takes effect immediately
• Toggling a system setting or preference
• Controlling a service state (on/off)
• The action is like a physical switch
• Binary state with immediate feedback