Accent theme

Base radius

Accent theme

Base radius

Colour scheme
Components

Switch

There's no native switch element yet, so this follows the WAI-ARIA switch pattern: a real <button role="switch">, which gets click, Space/Enter, and focus for free, with aria-checked telling assistive tech it's a two-state toggle rather than a regular button.

Usage
import { Switch } from "@kernelui/react";

<Switch defaultChecked>Enable notifications</Switch>

Props

PropTypeDefault
checked / defaultCheckedbooleanfalse
onCheckedChange(checked: boolean) => void

Accessibility

Wrapping it with label text works because <button> is a labelable element, exactly like <input>, so clicking the text toggles the switch without any extra click handler.