Switch

Toggle switch for boolean input.

import { Switch } from "ui-lab-components";
 
export function Example() {
  return <Switch />;
}

Inline Form Field

Switch paired with a label in a horizontal form row.

"use client";
 
import { useState } from 'react';
import { Switch } from 'ui-lab-components';
 
export const metadata = {
  title: 'Inline Form Field',
  description: 'Switch paired with a label in a horizontal form row.',
  access: 'free' as const,
};
 
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"
        isSelected={enabled}
        onChange={setEnabled}
      />
    </div>
  );
}

Settings Panel

A list of toggleable settings with dividers.

Push notifications
Sound effects
App badge
"use client";
 
import { useState } from 'react';
import { Switch } from 'ui-lab-components';
 
export const metadata = {
  title: 'Settings Panel',
  description: 'A list of toggleable settings with dividers.',
  access: 'free' as const,
};
 
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="w-72 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} isSelected={value} onChange={onChange} />
        </div>
      ))}
    </div>
  );
}

Disabled State

Switch in both on and off disabled states.

Disabled off
Disabled on
import { Switch } from 'ui-lab-components';
 
export const metadata = {
  title: 'Disabled State',
  description: 'Switch in both on and off disabled states.',
  access: 'free' as const,
};
 
export default function Example() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-3">
        <Switch aria-label="Off disabled" isDisabled defaultSelected={false} />
        <span className="text-sm text-foreground-400">Disabled off</span>
      </div>
      <div className="flex items-center gap-3">
        <Switch aria-label="On disabled" isDisabled defaultSelected={true} />
        <span className="text-sm text-foreground-400">Disabled on</span>
      </div>
    </div>
  );
}

Small Size

Compact switch for dense UIs.

Dense mode
"use client";
 
import { useState } from 'react';
import { Switch } from 'ui-lab-components';
 
export const metadata = {
  title: 'Small Size',
  description: 'Compact switch for dense UIs.',
  access: 'free' as const,
};
 
export default function Example() {
  const [dense, setDense] = useState(false);
 
  return (
    <div className="flex items-center gap-2">
      <Switch
        size="sm"
        aria-label="Dense mode"
        isSelected={dense}
        onChange={setDense}
      />
      <span className="text-sm text-foreground-400">Dense mode</span>
    </div>
  );
}

Controlled Toggle

Fully controlled switch with external state and reset.

Feature is disabled

"use client";
 
import { useState } from 'react';
import { Switch } from 'ui-lab-components';
 
export const metadata = {
  title: 'Controlled Toggle',
  description: 'Fully controlled switch with external state and reset.',
  access: 'free' as const,
};
 
export default function Example() {
  const [active, setActive] = useState(false);
 
  return (
    <div className="flex flex-col items-center gap-4">
      <Switch
        aria-label="Feature flag"
        isSelected={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>
  );
}
UI Lab