switch

<!-- Basic Switch -->
<div class="switch-container">
  <span id="wifi-label">Wi-Fi</span>
  <button
    role="switch"
    aria-checked="true"
    aria-labelledby="wifi-label"
  >
    <span class="switch-track">
      <span class="switch-thumb"></span>
    </span>
  </button>
</div>

<!-- aria-checked="true" means ON
     aria-checked="false" means OFF -->

<!-- Switch Using Native Button -->
<button
  role="switch"
  aria-checked="false"
  aria-label="Enable notifications"
  class="switch"
>
  <span class="switch-track">
    <span class="switch-thumb"></span>
  </span>
  <span class="switch-label">Notifications</span>
</button>

<script>
  const switchButton = document.querySelector('[role="switch"]');
  
  switchButton.addEventListener('click', () => {
    const isChecked = switchButton.getAttribute('aria-checked') === 'true';
    switchButton.setAttribute('aria-checked', !isChecked);
  });
  
  // Keyboard support is automatic with <button>
</script>

<style>
  .switch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
  }

  .switch-track {
    width: 48px;
    height: 28px;
    background: #ccc;
    border-radius: 14px;
    position: relative;
    transition: background 0.2s;
  }

  [aria-checked="true"] .switch-track {
    background: #4f46e5;
  }

  .switch-thumb {
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
  }

  [aria-checked="true"] .switch-thumb {
    left: 22px;
  }
</style>

<!-- Switch vs Checkbox: When to Use Each -->

<!-- Use CHECKBOX when:
     - Selecting multiple independent options
     - Form submission with on/off values
     - The state isn't immediately applied -->
<label>
  <input type="checkbox" name="terms" />
  I agree to the terms
</label>

<!-- Use SWITCH when:
     - The setting takes effect immediately
     - It's a binary on/off toggle
     - It controls a system/app state -->
<button role="switch" aria-checked="true" aria-label="Dark mode">
  <span class="switch-track">
    <span class="switch-thumb"></span>
  </span>
</button>

<!-- Key difference: 
     Switches have IMMEDIATE effect
     Checkboxes typically require form submission -->

<!-- Switch with Description -->
<div class="setting-row">
  <div class="setting-info">
    <span id="autosave-label" class="setting-name">Auto-save</span>
    <span id="autosave-desc" class="setting-description">
      Automatically save your work every 5 minutes
    </span>
  </div>
  
  <button
    role="switch"
    aria-checked="false"
    aria-labelledby="autosave-label"
    aria-describedby="autosave-desc"
    class="switch"
  >
    <span class="switch-track">
      <span class="switch-thumb"></span>
    </span>
  </button>
</div>

<!-- aria-describedby provides additional context
     for screen reader users -->

<!-- Group of Related Switches -->
<fieldset>
  <legend>Notification Settings</legend>
  
  <div class="switch-group">
    <div class="switch-row">
      <label id="email-label">Email notifications</label>
      <button
        role="switch"
        aria-checked="true"
        aria-labelledby="email-label"
      ></button>
    </div>
    
    <div class="switch-row">
      <label id="push-label">Push notifications</label>
      <button
        role="switch"
        aria-checked="false"
        aria-labelledby="push-label"
      ></button>
    </div>
    
    <div class="switch-row">
      <label id="sms-label">SMS notifications</label>
      <button
        role="switch"
        aria-checked="false"
        aria-labelledby="sms-label"
      ></button>
    </div>
  </div>
</fieldset>

<!-- Use fieldset/legend to group related switches -->

// React Switch Component
import { useState, useCallback } from 'react';

interface SwitchProps {
  label: string;
  description?: string;
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
}

function Switch({
  label,
  description,
  checked,
  onChange,
  disabled = false,
}: SwitchProps) {
  const handleClick = useCallback(() => {
    if (!disabled) {
      onChange(!checked);
    }
  }, [checked, disabled, onChange]);

  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
    if (e.key === ' ' || e.key === 'Enter') {
      e.preventDefault();
      handleClick();
    }
  }, [handleClick]);

  const labelId = `switch-label-${label.toLowerCase().replace(/\s+/g, '-')}`;
  const descId = description 
    ? `switch-desc-${label.toLowerCase().replace(/\s+/g, '-')}`
    : undefined;

  return (
    <div className="switch-container">
      <div className="switch-info">
        <span id={labelId} className="switch-label">{label}</span>
        {description && (
          <span id={descId} className="switch-description">
            {description}
          </span>
        )}
      </div>
      
      <button
        type="button"
        role="switch"
        aria-checked={checked}
        aria-labelledby={labelId}
        aria-describedby={descId}
        aria-disabled={disabled}
        onClick={handleClick}
        onKeyDown={handleKeyDown}
        className={`switch ${checked ? 'checked' : ''} ${disabled ? 'disabled' : ''}`}
      >
        <span className="switch-track">
          <span className="switch-thumb" />
        </span>
      </button>
    </div>
  );
}

// Usage
function Settings() {
  const [darkMode, setDarkMode] = useState(false);
  const [notifications, setNotifications] = useState(true);

  return (
    <div className="settings">
      <Switch
        label="Dark Mode"
        description="Use dark theme throughout the app"
        checked={darkMode}
        onChange={setDarkMode}
      />
      
      <Switch
        label="Notifications"
        description="Receive push notifications"
        checked={notifications}
        onChange={setNotifications}
      />
    </div>
  );
}

<!-- Disabled Switch -->
<div class="switch-container">
  <span id="premium-label">Premium features</span>
  <span id="premium-desc" class="subdued">
    Upgrade to enable premium features
  </span>
  
  <button
    role="switch"
    aria-checked="false"
    aria-labelledby="premium-label"
    aria-describedby="premium-desc"
    aria-disabled="true"
    disabled
    class="switch disabled"
  >
    <span class="switch-track">
      <span class="switch-thumb"></span>
    </span>
  </button>
</div>

<style>
  .switch.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .switch.disabled .switch-track {
    background: #ddd;
  }
</style>

<!-- Use both aria-disabled and native disabled
     for complete accessibility -->