Z Web Components

Checkbox

<z-checkbox> is a component that provides the same functionality as a native <input type="checkbox"> enhanced with a better and unified design.

<z-checkbox label="checkbox input"></z-checkbox>

Attributes

Label

The label attribute provides a clickable label for the <z-checkbox> component.

<z-checkbox label="checkbox input"></z-checkbox>

Right

The right attribute makes the <z-checkbox> component appear after its label.

<z-checkbox label="checkbox input after label" right></z-checkbox>
<z-checkbox label="checkbox input"></z-checkbox>

Checked

The checked attribute is watched and makes the checkbox beeing checked if provided (no value needed).

This attribute can also be used for setting a default value to the component.

<z-checkbox label="checkbox input checked" checked></z-checkbox>

Disabled

The disabled attribute prevents the checkbox from beeing used and gives it an understandable styling.

<z-checkbox label="checkbox input disabled" disabled></z-checkbox>
<z-checkbox label="checkbox input checked & disabled" checked disabled></z-checkbox>

Accessibility

The <z-checkbox> component works with the native <input type="checkbox"> element to provide an accessible experience.

Events

z-change

The z-change event is fired whenever the value of the checkbox changes. It is a CustomEvent.

This event provides a detail object containing the new value of the checkbox.

<z-checkbox id="change-event-checkbox" label="Checkbox with z-change event"></z-checkbox>
<p>Result: <b id="change-event-result">?</b></p>

<script>
    const $checkbox = document.querySelector('#change-event-checkbox')
    const $result = document.querySelector('#change-event-result')

    $checkbox.addEventListener('z-change', ({ detail }) => {
        $result.innerText = detail.value
    })
</script>