Switch

kai-switch

A toggle switch for a setting that applies the moment it flips — “Temporary chat”, notifications, a feature flag. It manages its own on/off state and reports changes with a single event.

• Shadow DOM
• 1 event
• role="switch"
• Keyboard operable
• Self-managing

Preview

When to use

Use <kai-switch> for an immediate on/off setting in a header menu, a settings row, or a preference panel. For a labelled choice submitted with a form, prefer a checkbox. In SolidJS, the Switch primitive does the same without the web-component wrapper.

Usage

Set the initial state with the checked attribute and read changes from kai-change:

<kai-switch checked label="Temporary chat"></kai-switch>

<script type="module">
  import '@kitn.ai/ui/elements';

  document.querySelector('kai-switch')
    .addEventListener('kai-change', (e) => console.log('checked:', e.detail.checked));
</script>

• Self-managing — the switch toggles on click or Space/Enter and tracks its own state; you only listen for kai-change.
• checked — a bare attribute (<kai-switch checked>) starts it on.
• label — sets the accessible name (aria-label); the switch is visual-only, so always provide one.
• disabled — blocks interaction and dims the control.

Examples

On

Starts on via the checked attribute.

Code

Disabled

Non-interactive and dimmed.

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
checked	boolean	—	Controlled checked state. Settable and reflected to the `checked` attribute. `el.checked = true` (or `<kai-switch checked>`) drives it; the toggle UI updates it and fires `kai-change`. Read `el.checked` for live state.
defaultChecked	boolean	—	Initial checked state on mount (uncontrolled seed). Bare attribute (`<kai-switch default-checked>`) turns it on.
disabled	boolean	—	Disable interaction.
label	string	—	Accessible label.
name	string	—	Form-control name (paired with `value`).
value	string	—	Submitted value when checked (paired with `name`). Defaults to `'on'`.

Events

Event	Detail	Notes
kai-change	{ … }	The toggle changed.

Methods

Method	Signature	Notes
toggle	(): void	Flip the switch and fire `kai-change` (no-op while disabled).
focus	(options?: FocusOptions): void	Focus the inner `role="switch"` button (the host element can't reach it).

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

Switch

---

Need a hand? Report a bug Ask for help