Switch

Toggle switch for boolean input.

import { Switch } from 'ui-lab-components/switch';
"use client";
 
import { useState } from 'react';
import { Switch } from 'ui-lab-components/switch';
 
export default function Example() {
  const [selected, setSelected] = useState(false);
 
  return <Switch selected={selected} onChange={setSelected} />;
}

switch/01-basic-switch

Switch paired with a label in a horizontal form row.

Loading interactive preview
"use client";
 
import { useState } from 'react';
import { Switch } from 'ui-lab-components/switch';
 
export default function Example() {
  const [enabled, setEnabled] = useState(false);
 
  return (
    <div className="flex items-center justify-between gap-4 w-64">
      <label htmlFor="marketing" className="text-sm">
        Marketing emails
      </label>
      <Switch
        id="marketing"
        aria-label="Marketing emails"
        selected={enabled}
        onChange={setEnabled}
      />
    </div>
  );
}

switch/02-settings-panel-switch

A list of toggleable settings with dividers.

Loading interactive preview
"use client";
 
import { useState } from 'react';
import { Switch } from 'ui-lab-components/switch';
 
export default function Example() {
  const [notifications, setNotifications] = useState(true);
  const [sounds, setSounds] = useState(false);
  const [badge, setBadge] = useState(true);
 
  const settings = [
    { id: "notifications", label: "Push notifications", value: notifications, onChange: setNotifications },
    { id: "sounds", label: "Sound effects", value: sounds, onChange: setSounds },
    { id: "badge", label: "App badge", value: badge, onChange: setBadge },
  ];
 
  return (
    <div className="divide-y divide-background-700">
      {settings.map(({ id, label, value, onChange }) => (
        <div key={id} className="flex items-center justify-between py-3">
          <span className="text-sm">{label}</span>
          <Switch aria-label={label} selected={value} onChange={onChange} />
        </div>
      ))}
    </div>
  );
}

switch/03-disabled-state

Switch in both on and off disabled states.

Loading interactive preview
import { Switch } from 'ui-lab-components/switch';
 
export default function Example() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-3">
        <Switch aria-label="Off disabled" disabled selected={false} />
        <span className="text-sm text-foreground-400">Disabled off</span>
      </div>
      <div className="flex items-center gap-3">
        <Switch aria-label="On disabled" disabled selected />
        <span className="text-sm text-foreground-400">Disabled on</span>
      </div>
    </div>
  );
}

switch/04-small-size

Compact switch for dense UIs.

Loading interactive preview
"use client";
 
import { useState } from 'react';
import { Switch } from 'ui-lab-components/switch';
 
export default function Example() {
  const [dense, setDense] = useState(false);
 
  return (
    <div className="flex items-center gap-2">
      <Switch
        size="sm"
        aria-label="Dense mode"
        selected={dense}
        onChange={setDense}
      />
      <span className="text-sm text-foreground-400">Dense mode</span>
    </div>
  );
}

switch/05-controlled-toggle

Fully controlled switch with external state and reset.

Loading interactive preview
"use client";
 
import { useState } from 'react';
import { Switch } from 'ui-lab-components/switch';
 
export default function Example() {
  const [active, setActive] = useState(false);
 
  return (
    <div className="flex flex-col items-center gap-4">
      <Switch
        aria-label="Feature flag"
        selected={active}
        onChange={setActive}
      />
      <p className="text-xs text-foreground-400">
        Feature is <strong>{active ? "enabled" : "disabled"}</strong>
      </p>
      <button
        className="text-xs underline text-foreground-400"
        onClick={() => setActive(false)}
      >
        Reset
      </button>
    </div>
  );
}