Z Web Components

Toggle

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

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

Attributes

Label

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

Right

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

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

Active

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

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

<z-toggle label="toggle input active" active></z-toggle>

Onlabel & Offlabel

The onlabel and offlabel attributes add little labels inside the <z-toggle> component.

<z-toggle label="toggle input with custom inside labels" onlabel="ON" offlabel="OFF"></z-toggle>
<z-toggle label="toggle input with custom inside labels" onlabel="✓"></z-toggle>
<z-toggle label="toggle input with custom inside labels" offlabel="✗"></z-toggle>

Disabled

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

<z-toggle label="toggle input disabled" disabled></z-toggle>
<z-toggle label="toggle input active & disabled" active disabled></z-toggle>

Accessibility

The <z-toggle> 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 toggle changes. It is a CustomEvent.

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

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

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

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