hp-label

Form label primitive. Wraps a native <label> so click-to-focus and screen-reader association work for free. for attribute references the target input's id; required stamps a "*", optional stamps a muted "(optional)".

Examples

API

Intent

Changelog

subscribe to updates

accept terms

marketing emails

<body> <hp-checkbox id="terms"></hp-checkbox> <hp-label for="terms">Accept terms</hp-label>  <hp-label for="email" required>Email</hp-label>  <hp-label for="phone" optional>Phone</hp-label> </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`htmlFor`	`for`	`string`	`""`	ID of the input this label targets. Forwarded to the inner `<label>`'s `for` attribute — clicking the label focuses / toggles the linked input. Maps to the `for` HTML attribute.
`required`	`required`	`boolean`	`false`	Append a "*" required marker after the label text. Stamps aria-required on the linked input is the consumer's job — this is the visual cue only.
`optional`	`optional`	`boolean`	`false`	Append a muted "(optional)" hint after the label text.

Slots

Slot	Description
`(default)`	Label text

Accessibility

Inner native <label for="..."> wires click-to-focus and announces the label text alongside the input value. The required "*" is aria-hidden — set aria-required="true" on the input itself for the semantic.

No per-component entries in CHANGELOG.md yet.

Install

Properties

Slots

Accessibility

Contents