EccUtilsDesignCheckbox Component

Overview

The ecc-utils-design-checkbox component provides a standard checkbox input for forms, allowing users to select one or more options.

Usage

Basic Checkbox

This example shows a default checkbox.

Disabled Checkbox

This example shows a checkbox in a disabled state.

Properties

checked

Controls the checked state of the checkbox.

<EccUtilsDesignCheckbox checked={true} />

disabled

When true, the checkbox is non-interactive.

<EccUtilsDesignCheckbox disabled={true} />

name

The name attribute, used when submitting the checkbox as part of a form.

<EccUtilsDesignCheckbox name="newsletter" />

value

The value attribute, used when submitting the checkbox as part of a form.

<EccUtilsDesignCheckbox value="subscribe" />

invalid and error

error shows a message under the checkbox, e.g. one that an API returned for this field (see Field errors), and marks the checkbox as invalid: it gets a red border, aria-invalid="true" and aria-describedby pointing to the message, and screen readers announce the message (aria-live="polite"). invalid marks the checkbox as invalid without a message, e.g. when the message is shown elsewhere. Clear both when the user changes the value or submits again. The message has the part error for styling (ecc-utils-design-checkbox::part(error)). Unlike the other controls' messages, it is positioned under the box without taking space (so that it doesn't widen or shift the box next to its label): leave room below the checkbox, e.g. with a margin. Long messages don't wrap.

<EccUtilsDesignCheckbox error="Is required." />

Events

ecc-input-changed

Fires when the checkbox is checked or unchecked by the user.

<EccUtilsDesignCheckbox 
  onEccInputChanged={(event) => {
    console.log(event.detail.checked, event.detail.value);
  }}
/>