Switch

Switch is a binary on/off control built on Radix. Space or Enter toggles it; the thumb slides and grows when on. Use it for instantly-applied settings (for a form choice that needs submitting, prefer a Checkbox).

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';

import { Switch } from '@infinitibit_gmbh/ui';

export function Example() {
  return <Switch label="Wi-Fi" defaultChecked />;
}

Icon

Pass any node to icon to render it inside the thumb (the thumb grows to fit). Useful for reinforcing the on/off meaning.

<Switch defaultChecked icon={<CheckIcon />} />

States

On, off, and disabled. A disabled switch is visually muted and non-interactive.

API

Prop	Type	Default	Description
checked	boolean	—	Controlled on/off state
defaultChecked	boolean	false	Initial state (uncontrolled)
onCheckedChange	(checked: boolean) => void	—	Called with the new state on toggle
disabled	boolean	—	Prevents interaction
icon	ReactNode	—	Rendered inside the thumb
label	ReactNode	—	Optional inline label (htmlFor)

All other Radix Switch.Root props are forwarded.

Accessibility

• Renders role="switch" with aria-checked reflecting the state.
• Space and Enter toggle; the focus ring uses :focus-visible.
• An optional label is associated via htmlFor, so clicking it toggles the switch.