Packages
mishka_chelekom
0.0.9
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
usage-rules/headless/switch.md
# switch (headless)
An unstyled, accessible on/off toggle rendered as a `role="switch"` button, with behavior delegated to the shared `Toggle` JS engine. Implements the [WAI-ARIA APG Switch pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
## Generate
```bash
mix mishka.ui.gen.headless switch
```
Generates `lib/<app>_web/components/headless/switch.ex`. Wire up the JS engine in `app.js`:
```js
import Toggle from "./toggle.js";
const Hooks = { Toggle };
```
## Anatomy
Root is a `<button type="button">` with `phx-hook="Toggle"` and `class="chelekom-switch"`. Parts (queried via `data-part`):
| Part | Element | `data-part` | Class | Rendered when |
|------|---------|-------------|-------|----------------|
| root | `button` | — | `chelekom-switch` | always |
| input | `input` (checkbox) | `input` | `chelekom-switch__input chelekom-sr-only` | `name` is set |
| thumb | `span` | `thumb` | `chelekom-switch__thumb` | always |
| label | `span` | `label` | `chelekom-switch__label` | `inner_block` present |
`Toggle` queries `[data-part="input"]` to keep the hidden checkbox in sync for form submission.
## ARIA & keyboard
- **root** — `role="switch"`, `aria-checked` (`"true"`/`"false"`, mirrors on state), `aria-labelledby="#{@id}-label"` when a label (`inner_block`) is present.
- **input** — `aria-hidden="true"`, `tabindex="-1"` (visually hidden, present only for form posting).
- **thumb** — `aria-hidden="true"` (decorative).
- **Enter** / **Space** — toggle the switch (handled by `Toggle`).
On toggle, `Toggle` flips `aria-checked` and (since role is `switch`) the `data-checked`/`data-unchecked` attributes, and syncs the hidden input's `checked`. Toggling is skipped if the root carries `data-disabled`.
## State
`Toggle` maintains mutually-exclusive, paired-presence attributes on the root, mirrored by `aria-checked`:
- `data-checked` — present when on.
- `data-unchecked` — present when off.
The template renders the initial state from the `checked` assign; `Toggle` re-syncs on each Enter/Space/click.
## Example
```heex
<.switch id="notifications" name="notifications" checked={false}>
Enable notifications
</.switch>
```
Without a form input or label:
```heex
<.switch id="dark-mode" />
```
**Attrs**: `id` (required), `name` (string, default `nil` — when set, renders the hidden checkbox `<input>` for form submission), `checked` (boolean, default `false`), `class`, `rest` (global).
**Slot**: `inner_block` (optional label content — when present, `aria-labelledby` is wired and the label `<span>` is rendered).
## Styling
Ships **no** colors or spacing — structural markup only. Style via the `chelekom-switch*` classes (`chelekom-switch`, `__input`, `__thumb`, `__label`) and the `data-checked`/`data-unchecked` state attributes:
```css
.chelekom-switch { /* track styles */ }
.chelekom-switch[data-checked] { /* on track */ }
.chelekom-switch[data-unchecked] { /* off track */ }
.chelekom-switch__thumb { /* knob */ }
.chelekom-switch[data-checked] .chelekom-switch__thumb { /* knob, on position */ }
```
Add your own classes to the root via `class`. The hidden `__input` uses `chelekom-sr-only` to stay visually hidden while remaining form-submittable.