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
checked	boolean	—	Initial checked state. Bare attribute (`<kai-switch checked>`) turns it on.
disabled	boolean	—	Disable interaction.
label	string	—	Accessible label.

Events

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

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