Components

Switch

A toggle switch for binary on/off states. Ideal for settings and preferences that take effect immediately.

Installation

npm install @trinkui/react

import { Switch } from "@trinkui/react";

Basic toggle switch with a label.

<Switch label="Enable notifications" />

<Switch label="Dark mode" defaultChecked />

Available in three sizes: sm, md, and lg.

<Switch size="sm" label="Small" />
<Switch size="md" label="Medium" />
<Switch size="lg" label="Large" />

Use checked and onChange for controlled behavior.

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

<Switch
  checked={enabled}
  onChange={setEnabled}
  label="Airplane mode"
/>

Use the disabled prop to prevent interaction.

<Switch label="Locked setting" disabled />
<Switch label="Locked on" disabled defaultChecked />

Prop	Type	Default	Description
checked	boolean	-	Controlled checked state
defaultChecked	boolean	false	Initial checked state for uncontrolled usage
onChange	(checked: boolean) => void	-	Callback when the switch is toggled
label	string	-	Label text displayed next to the switch
disabled	boolean	false	Disable the switch
size	"sm" \| "md" \| "lg"	"md"	Size of the switch

Uses role="switch" for proper semantic meaning.
Applies aria-checked to communicate the current state to assistive technologies.
Toggleable via keyboard with Space and Enter keys.
Label is associated with the switch for click-to-toggle behavior.
Visible focus ring when navigating with keyboard.