Switch

import { Switch } from "@brijbyte/agentic-ui/switch";

import "@brijbyte/agentic-ui/switch.css";

export default function HighLevelDemo() {
  return (
    <>
      <Switch>Notifications</Switch>
      <Switch defaultChecked>Auto-save (on by default)</Switch>
      <Switch disabled>Disabled off</Switch>
      <Switch defaultChecked disabled>
        Disabled on
      </Switch>
    </>
  );
}

import { useState } from "react";
import { Switch } from "@brijbyte/agentic-ui/switch";

import "@brijbyte/agentic-ui/switch.css";

export default function ControlledDemo() {
  const [val, setVal] = useState(false);

  return (
    <Switch checked={val} onCheckedChange={(c) => setVal(c as boolean)}>
      Dark mode: {val ? "on" : "off"}
    </Switch>
  );
}

import { useId } from "react";
import { SwitchRoot, SwitchThumb } from "@brijbyte/agentic-ui/switch";

import "@brijbyte/agentic-ui/switch.css";

export default function ComposedDemo() {
  const id = useId();
  return (
    <label
      htmlFor={id}
      style={{
        display: "flex",
        alignItems: "center",
        gap: "var(--space-2)",
        cursor: "pointer",
        fontFamily: "var(--font-mono)",
        fontSize: "var(--font-size-sm)",
        color: "var(--color-primary)",
      }}
    >
      <SwitchRoot id={id}>
        <SwitchThumb />
      </SwitchRoot>
      Styled Root + Thumb
    </label>
  );
}