Checkbox Group

import "@taprootio/espalier/checkbox/group";

Default

Place esp-checkbox elements in the default slot.

name

name has a default value of "".

The name used when the group participates in a <form>.

required

required has a default value of false.

When true, at least one checkbox must be checked before the form can be submitted.

required-message

required-message has a default value of "".

A custom message to display when the group is required but no checkbox is checked. Defaults to "Please select at least one option." when not set.

disabled

disabled has a default value of false.

Disables all child checkboxes in the group.

intent

intent has a default value of undefined.

The element's intent — its meaning: neutral (no pin), or success, warning, danger, info — each pinned to its fixed status family (blue for info), retunable per theme via intents. On token-emitting controls a non-neutral intent pins the filled-action pair to that family, derived over the governing zone's theme; class-styled chrome (badges, callouts, status pills) opts out of inline emission and renders its treatment from CSS classes instead. An intent never repaints the surrounding zone, which is what contexts are for. Removing the attribute restores the element's own default intent.

context

context has a default value of undefined.

A theme-defined color zone. The selected context rebinds designer-facing roles and emits a complete, contrast-enforced semantic token table on this host for descendants to inherit.

focus

Focus the first non-disabled checkbox in the group.

validate

Re-run constraint validation and dispatch esp-validity-changed.

checkValidity

Check whether the current state is valid (delegates to ElementInternals).

traverseToClosest

Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.

esp-value-changed

esp-value-changed is of type CustomEvent<string[]>.

Fired when any child checkbox state changes. The detail is an array of the values of all currently checked checkboxes.

esp-validity-changed

esp-validity-changed is of type CustomEvent<{ valid: boolean; message: string }>.

Fired whenever constraint validation runs.

--esp-field-background

Background color of the shared field shell. Defaults to var(--esp-color-layer-2).

--esp-field-border-color

Border color of the shared field shell. Defaults to var(--esp-color-border).

--esp-field-border-width

Border width of the shared field shell. Defaults to 1px.

--esp-field-text-color

Text color used inside the shared field shell. Defaults to var(--esp-color-text).

--esp-field-hover-bg

Hover background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-bg

Focus background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-shadow

Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).