Switch

Interactive

See Switch in Storybook for every variant, with live controls.

An on/off setting that takes effect immediately. If the change only lands when a form is submitted, use Checkbox.

import { Switch } from "@kairosis/eidos";

<Switch label="Auto-deploy" checked={autoDeploy} onChange={setAutoDeploy} />;

Props

Prop	Type	Default	Description
checked	boolean	—	Required. Controlled
onChange	(checked: boolean) => void	—	Receives the next value
label	ReactNode	—
size	"sm" | "md"	"md"	28×16 or 36×20
disabled	boolean	false

Forwards a ref to the underlying input.

Guidelines

• The input carries role="switch", so it announces as on/off rather than checked/unchecked.
• Because it applies immediately, don't pair it with a Save button — that's a Checkbox.
• Label the state, not the action: "Auto-deploy", not "Enable auto-deploy".