Skip to main content

Switch

Toggle switch for binary on/off settings. Built on Radix UI Switch.

Import

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

Usage

<Switch label="Dark mode" />
<Switch label="Notifications" defaultChecked />
<Switch label="Disabled" disabled />

Controlled

const [enabled, setEnabled] = useState(false);
<Switch label="Feature flag" checked={enabled} onChange={setEnabled} />

API

PropTypeDefaultDescription
labelstringLabel text
checkedbooleanControlled state
defaultCheckedbooleanUncontrolled initial state
onChange(checked: boolean) => voidChange handler
disabledbooleanfalseDisable interaction
namestringForm field name

Accessibility

Built on Radix UI Switch:

  • role="switch" with aria-checked
  • Space / Enter to toggle
  • Label click toggles switch