Checkbox

The inherited Ecology checkbox, wearing the CBFish skin. The checked and indeterminate states fill with brand navy because the theme re-points --color-primary; form-associated with an inlined check icon.

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>

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.