Pixel UI/Forms/Toggle

Toggle

A pixel switch: a pal walks across to flip it.

<piix-toggle>DOM + canvasForm-ready

Dark mode

<piix-toggle checked>Dark mode</piix-toggle>

Pal

Tone

The knob is a pal standing in the track. Switch it and the pal walks to the other end, turns, and the track lights up behind it.

Installation

<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

<!-- just toggle (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/toggle.min.js"></script>

npm install piixpal

// once, in your entry file
import "piixpal";

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-toggle checked>Dark mode</piix-toggle>
  );
}

Usage

<piix-toggle checked>Dark mode</piix-toggle>

Examples

Settings

Notifications

Sound

Beta features

<div style="display:grid;gap:14px">
  <piix-toggle checked>Notifications</piix-toggle>
  <piix-toggle pal="pinch" tone="coral">Sound</piix-toggle>
  <piix-toggle pal="penguin" tone="sky" disabled>Beta features</piix-toggle>
</div>

API reference

Attribute	What it does	Default
`checked`	on	–
`pal`	who flips it	`bitbug`
`tone`	the colour when on	`lime`
`name`	the form field name	–
`value`	sent when on	`on`
`disabled`	can't be flipped	–

Events

Event	When
`change`	when it flips
`piix:toggle`	`detail.checked`

Accessibility

Announced as a switch; Space and Enter flip it.
Form-associated.