Switch

kai-switch

Manages its own state and reports the change once, so a settings row needs no wiring.

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

Preview

When to use

In a settings row, a header menu, or a preference panel, for a setting that takes effect at once. For a choice collected with a form, use Form instead.

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/web-components';

  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, reflected to the `checked` attribute. The toggle updates it and fires `kai-change`.
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