Checkbox

A custom box with checked, indeterminate, and disabled states, Space/Enter keyboard toggling, and an inlined Lucide check icon. Form-associated; emits a composed change event.

Inherited wc import '@esa/ecology/esa-checkbox';

Preview

<esa-checkbox label="Subscribe to updates" checked></esa-checkbox>

States

<esa-checkbox label="Unchecked"></esa-checkbox>
<esa-checkbox label="Checked" checked></esa-checkbox>
<esa-checkbox label="Indeterminate" indeterminate></esa-checkbox>
<esa-checkbox label="Disabled" disabled></esa-checkbox>
<esa-checkbox label="Disabled + checked" disabled checked></esa-checkbox>

Sizes

<esa-checkbox label="Extra small" size="xs" checked></esa-checkbox>
<esa-checkbox label="Small" size="sm" checked></esa-checkbox>
<esa-checkbox label="Medium" size="md" checked></esa-checkbox>
<esa-checkbox label="Large" size="lg" checked></esa-checkbox>

No label

Omit label for a bare box — supply an aria-label for an accessible name.

<esa-checkbox checked aria-label="Select row"></esa-checkbox>

Form participation

Checked boxes submit on under their name; unchecked boxes submit nothing.

<form>
  <esa-checkbox label="Subscribe" name="subscribe" checked></esa-checkbox>
  <button type="submit">Submit</button>
</form>

API

Prop	Type	Default	Description
`label`	`string`	`''`	Text rendered beside the box.
`checked`	`boolean`	`false`	Whether the box is checked.
`indeterminate`	`boolean`	`false`	Renders the mixed/partial state with a dash.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Box and label size.
`disabled`	`boolean`	`false`	Disables interaction.

Events

Event	Type	Default	Description
`change`	`CustomEvent<{ checked: boolean }>`	—	Fired when toggled. Composed and bubbling; detail.checked is the new state.