EccUtilsDesignCheckbox Component

2.0.0-alpha.6

<ecc-utils-design-checkbox/>

EccUtilsDesignCheckbox

Overview

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

This component is a custom-styled checkbox that provides consistent behavior and appearance across browsers.

This example shows a default checkbox.

Accept terms and conditions

This example shows a checkbox in a disabled state.

Cannot be changed

Property	Type	Default	Description
`checked`	`boolean`	`false`	When `true`, the checkbox is checked.
`disabled`	`boolean`	`false`	When `true`, disables the checkbox.
`name`	`string`	`""`	The name of the checkbox for form submission.
`value`	`string`	`""`	The value of the checkbox for form submission.

Controls the checked state of the checkbox.

<EccUtilsDesignCheckbox checked={true} />

When true, the checkbox is non-interactive.

<EccUtilsDesignCheckbox disabled={true} />

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

<EccUtilsDesignCheckbox name="newsletter" />

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

<EccUtilsDesignCheckbox value="subscribe" />

Event Name	React Event Name	Detail Type	Description
`ecc-input-changed`	`onEccInputChanged`	`{ checked: boolean, value: string }`	Fired when the state of the checkbox changes.

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

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