# Switch

A role=switch toggle web component for immediate on/off settings — self-managing, keyboard-operable, isolated in Shadow DOM.

<p class="kai-tag-sub">kai-switch</p>

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.

## Preview

> **tip:** 
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`:

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

<script type="module">

  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.

### Disabled

Non-interactive and dimmed.

## Props

## Events

## Methods

## Composed from