Pixel UI/Forms/Checkbox

Checkbox

A pixel checkbox whose tick draws itself in, block by block.

<piix-checkbox>DOM + canvasForm-ready

Send me updates

<piix-checkbox checked>Send me updates</piix-checkbox>

Tone

A chunky pixel box. Tick it and the check mark draws itself in, block by block, with a puff of pixels; untick and it un-draws.

Installation

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

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

npm install piixpal

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

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-checkbox checked>Send me updates</piix-checkbox>
  );
}

Usage

<piix-checkbox checked>Send me updates</piix-checkbox>

Examples

A list

Pixel corners

Hard shadows

Rounded corners

<div style="display:grid;gap:12px">
  <piix-checkbox checked>Pixel corners</piix-checkbox>
  <piix-checkbox tone="coral">Hard shadows</piix-checkbox>
  <piix-checkbox tone="sky" disabled>Rounded corners</piix-checkbox>
</div>

API reference

Attribute	What it does	Default
`checked`	ticked	–
`tone`	the box colour when ticked	`lime`
`name`	the form field name	–
`value`	sent when ticked	`on`
`disabled`	can't be ticked	–

Events

Event	When
`change`	when it is ticked or unticked

Accessibility

Announced as a checkbox; Space ticks it.
Form-associated.