hp-toggle

Two-state on / off switch. Hex thumb slides between the off and on positions inside a pill-shaped track. role="switch", Space / Enter activate, aria-checked reflects state.

Examples

API

Intent

Changelog

<body> <hp-toggle></hp-toggle> <hp-toggle checked></hp-toggle> <hp-toggle disabled></hp-toggle> <hp-toggle checked disabled></hp-toggle> document .querySelector("hp-toggle") .addEventListener("change", (ev) => { console.log(ev.detail.checked); }); </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`checked`	`checked`	`boolean`	`false`	On (checked) state.
`disabled`	`disabled`	`boolean`	`false`	Disabled — no activation, removed from tab order.
`name`	`name`	`string \| undefined`	—	Optional form name (placeholder for forthcoming hp-form wiring).
`value`	`value`	`string`	`"on"`	Submitted value when checked.

Events

Event	Type	Description
`change`	`CustomEvent`	When the switch flips via user input. detail: { checked }

CSS Parts

Part	Description
`track`	The pill-shaped track element
`thumb`	The sliding hex thumb

When to use

Use for instantly-applied binary settings (notifications on / off, dark mode, autosave). The flip animation reads as "this changed right now".

Use for selections that require confirmation. Toggles imply the state is in effect the moment they flip; if a "Save" step is needed, use a checkbox + button instead.

No per-component entries in CHANGELOG.md yet.

Install

Properties

Events

CSS Parts

When to use

Contents