Switch

Overview

Switch is a toggle for a single on/off setting that takes effect immediately — like enabling a feature or notification. It’s built on Radix UI Switch, so it’s keyboard accessible and exposes the correct toggle role and state to assistive technology.

It comes in three sizes and a danger variant, and can show an icon on its thumb. Use a Switch for instant-effect settings; when a choice only applies after submitting a form, prefer a Checkbox. Pair it with a Label for an accessible caption.

Usage

Import the component:

import { Switch } from "@eqtylab/equality";

Controlled, driving the state yourself:

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

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

Uncontrolled, with an initial state:

<Switch defaultChecked />

Sizes

Three sizes are available; md is the default.

Small

Medium (default)

Large

Usage

<Switch size="sm" />
<Switch size="md" />
<Switch size="lg" />

States

Off

On

Disabled Off

Disabled On

Color Variants

Use the danger variant for toggles with a destructive or high-risk consequence.

Usage

<Switch variant="default" />
<Switch variant="danger" />

Thumb Icon

Set thumbIcon to render an icon on the switch thumb — a Lucide icon name or a React element. The switch shows a single icon; to display a different icon per state, swap thumbIcon yourself based on checked.

Usage

// Single icon
<Switch thumbIcon="Check" defaultChecked />

// Different icon per state
<Switch
  checked={enabled}
  onCheckedChange={setEnabled}
  thumbIcon={enabled ? "Check" : "X"}
/>

Props

Switch also accepts the underlying Radix Switch Root props (checked, onCheckedChange, defaultChecked, required, name, value) and className.