Switch

Overview

Built on Radix UI's Switch primitive. Renders a thumb that slides between unchecked (left) and checked (right) positions.

Usage

import { Switch } from "@leanicon/web-builder-library";

Uncontrolled:

With a label:

Controlled:

const [enabled, setEnabled] = React.useState(false);

<Switch checked={enabled} onCheckedChange={setEnabled} />;

Notes

• Accepts all Radix Switch.Root props (checked, defaultChecked, onCheckedChange, disabled, required, name, value).
• Uses peer class — pair with a peer-disabled: label modifier for disabled state styling.
• Dark mode: unchecked track uses bg-input/80; checked thumb uses bg-primary-foreground.