Switch

"use client";
 
import { useState } from 'react';
import { Switch } from 'ui-lab-components/switch';
 
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>
  );
}
 

"use client";
 
import { useState } from 'react';
import { Switch } from 'ui-lab-components/switch';
 
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} state={{ checked: value }} onChange={onChange} />
        </div>
      ))}
    </div>
  );
}
 

import { Switch } from 'ui-lab-components/switch';
 
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 checked={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 checked />
        <span className="text-sm text-foreground-400">Disabled on</span>
      </div>
    </div>
  );
}
 

"use client";
 
import { useState } from 'react';
import { Switch } from 'ui-lab-components/switch';
 
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>
  );
}
 

"use client";
 
import { useState } from 'react';
import { Switch } from 'ui-lab-components/switch';
 
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>
  );
}