Checkbox

import "@taprootio/espalier/checkbox";

Default

The label text for the checkbox.

checked

checked has a default value of false.

Whether the checkbox is in the checked state.

value

value has a default value of "".

The value associated with this checkbox. Used by esp-checkbox-group to track which checkboxes are selected.

name

name has a default value of "".

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

required

required has a default value of false.

When true, the 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 checkbox is required but not checked. Defaults to "Please check this box to continue." when not set.

disabled

disabled has a default value of false.

Controls whether the checkbox is disabled.

indeterminate

indeterminate has a default value of false.

Displays the checkbox in an indeterminate (partial) state. Clicking the checkbox clears the indeterminate state.

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 checkbox control.

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<{ checked: boolean; value: string }>.

Fired when the checkbox is toggled. The detail contains the new checked state and the checkbox value.

esp-validity-changed

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

Fired whenever constraint validation runs.

--esp-checkbox-size

The width and height of the checkbox icon. Defaults to var(--esp-size-normal-to-medium).

--esp-checkbox-icon-color

The stroke color of the checkbox icon. Defaults to var(--esp-color-text).

--esp-checkbox-focus-shadow

The color of the focus ring shadow. Defaults to var(--esp-color-shadow).

--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).