Skip to content

Checkbox

aidsgn-checkbox places a visually hidden native checkbox inside its visible native label. The custom box and checkmark provide consistent theme styling while the input keeps native keyboard, form, validation, and change behavior. Use the label attribute (and optional input-id) to supply its accessible, clickable label. checked and disabled configure the native input, and the checked property reads or changes its state.

<aidsgn-checkbox label="Send me product updates"></aidsgn-checkbox>
<aidsgn-checkbox checked label="Send me product updates"></aidsgn-checkbox>

Use it for independent multi-select choices. Clicking anywhere on the generated wrapping label toggles the input, and keyboard focus produces a visible ring around the custom box. When name is set, the native descendant participates in the surrounding form. Indeterminate, hint, error, and custom validation helper APIs are not implemented.