Switch

Preference and rule

<KbSwitch checked={on} onChange={setOn} label="Email me when a request is handed off" />

<KbSwitch tone="teal" checked={on} onChange={setOn} label="Run this rule" />

Disabled

<KbSwitch checked disabled onChange={noop} label="Managed by your plan" />

When to use

• Use a switch for a setting that takes effect immediately.
• For a choice inside a form that is saved later, use a checkbox.
• Put the setting's name beside it in words and say the effect, not the state: Email me when a request is handed off.
• If turning it on has a cost or risk, ask first or use a button, not a switch.

Import

import { KbSwitch } from "@/components/ui/KbSwitch";

<KbSwitch checked={on} onChange={setOn} label="Email me when a request is handed off" />

Props

Keyboard and screen readers

• Renders a button with role switch and aria-checked. Space and Enter toggle it.
• A switch has no visible text of its own, so it must be named with label or labelledBy.
• The target is 44 by 24px, and 44px tall under 860px wide.
• On and off differ by position and fill, not by colour alone.