Switch
Toggle control for binary on/off states with smooth animations and multiple sizes
Overview
The Switch component provides a toggle control for binary on/off states with smooth sliding animations. It supports multiple sizes, keyboard accessibility, and clear visual feedback for checked, unchecked, and disabled states.
Import
import { Switch } from "@px-ui/core";Usage
<div className="flex items-center gap-2">
<Switch id="notifications" />
<label htmlFor="notifications">Enable notifications</label>
</div>Examples
Sizes
The Switch component supports three size variants to match different interface contexts.
<Switch id="small" size="sm" defaultChecked />
<Switch id="default" defaultChecked />
<Switch id="large" size="lg" defaultChecked />With Labels
Switches are commonly paired with labels to describe what they control. Always use a label for accessibility.
<div className="flex items-center gap-2">
<Switch id="airplane" />
<label htmlFor="airplane">Airplane mode</label>
</div>
<div className="flex items-center gap-2">
<Switch id="wifi" defaultChecked />
<label htmlFor="wifi">Wi-Fi</label>
</div>
<div className="flex items-center gap-2">
<Switch id="bluetooth" defaultChecked />
<label htmlFor="bluetooth">Bluetooth</label>
</div>Disabled State
Switches can be disabled in either the on or off state.
<Switch id="disabled-off" disabled />
<Switch id="disabled-on" disabled defaultChecked />API Reference
Switch
A toggle control component with smooth animations and multiple size options.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "lg" | undefined | undefined | Size of the switch. When undefined, renders at default size |
className | string | - | Additional CSS classes |
Inherited Props: Inherits all props from Base UI Switch.Root including checked, defaultChecked, onCheckedChange, disabled, required, etc.