Forms

Switch

Toggle a setting on or off.

Import

tsx

import { Switch } from "@cronus-ui/ui";

bash

npx cronus-ui add switch

Examples

Default

A controlled switch with an associated Label.

Push notifications

tsx

function SwitchDemo() {
  const [enabled, setEnabled] = useState(true);

  return (
    <div className="flex items-center justify-between gap-3 max-w-xs">
      <Label htmlFor="notifications">Push notifications</Label>
      <Switch id="notifications" checked={enabled} onCheckedChange={setEnabled} />
    </div>
  );
}