Switch

import * as React from "react";
import { Switch } from "@/components/ui/switch";

export default function Example() {
  const [on, setOn] = React.useState(true);
  return <Switch label="Order updates by SMS" checked={on} onChange={e => setOn(e.target.checked)} />;
}

#Installation

$ npx uix-ui@latest add switch

This copies the file into components/ui/switch.tsx in your project. npx shadcn@latest add @uix/switch works too.

#Usage

import { Switch } from "@/components/ui/switch";

<div style={{ display: "grid", gap: 12 }}>
  <Switch size="sm" label="Small" defaultChecked />
  <Switch size="md" label="Medium" defaultChecked />
  <Switch label="Disabled" disabled />
</div>

#Examples

import { Switch } from "@/components/ui/switch";

export default function Example() {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <Switch size="sm" label="Small" defaultChecked />
      <Switch size="md" label="Medium" defaultChecked />
      <Switch label="Disabled" disabled />
    </div>
  );
}

#Props

Everything else is passed to the root element, so className, aria-* and event handlers work as usual.

#Dependencies

Installed for you by the CLI.

• class-variance-authority
• clsx
• tailwind-merge

• lib/utils.ts