Switch

import { Switch } from '@raystack/apsara';

function App() {
  return <Switch />;
}

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

  return (
    <label>
      <Switch checked={enabled} onCheckedChange={setEnabled} />
      <span>Enable notifications</span>
    </label>
  );
}

<Switch defaultChecked />

<Switch size="small" />
<Switch size="large" />

<Switch disabled />
<Switch disabled checked />

<div>
  <label>
    <span>Dark mode</span>
    <Switch />
  </label>
  
  <label>
    <span>Auto-save</span>
    <Switch defaultChecked />
  </label>
  
  <label>
    <span>Email notifications</span>
    <Switch />
  </label>
</div>

<div>
  <div>
    <label>
      <div>
        <strong>Marketing emails</strong>
        <p>Receive emails about new products and features</p>
      </div>
      <Switch />
    </label>
  </div>
  
  <div>
    <label>
      <div>
        <strong>Security alerts</strong>
        <p>Get notified about important security updates</p>
      </div>
      <Switch defaultChecked />
    </label>
  </div>
</div>

<form>
  <label>
    <Switch name="notifications" value="enabled" />
    <span>Enable notifications</span>
  </label>
  <button type="submit">Save settings</button>
</form>

<label>
  <Switch required />
  <span>I agree to the terms and conditions *</span>
</label>

function SettingsPanel() {
  const [settings, setSettings] = useState({
    darkMode: false,
    notifications: true,
    autoSave: true,
    analytics: false
  });

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

  return (
    <div>
      <h3>Settings</h3>
      
      <label>
        <span>Dark mode</span>
        <Switch
          checked={settings.darkMode}
          onCheckedChange={(checked) => updateSetting('darkMode', checked)}
        />
      </label>
      
      <label>
        <span>Notifications</span>
        <Switch
          size="small"
          checked={settings.notifications}
          onCheckedChange={(checked) => updateSetting('notifications', checked)}
        />
      </label>
      
      <label>
        <span>Auto-save</span>
        <Switch
          checked={settings.autoSave}
          onCheckedChange={(checked) => updateSetting('autoSave', checked)}
        />
      </label>
      
      <label>
        <span>Analytics</span>
        <Switch
          checked={settings.analytics}
          onCheckedChange={(checked) => updateSetting('analytics', checked)}
        />
      </label>
    </div>
  );
}