Z Web Components

Input

<z-input> is a component that provides the same functionality as a native <input> enhanced with material like design and animations.

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

Attributes

Label

The label attribute is the text that appreares as a placeholder when the input is not focused or is empty and as a label otherwize.

Type

All the native <input> types are supported by the <z-input> component.

Here is a list of those that can be used:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • password
  • search
  • tel
  • text
  • time
  • url
  • week
<z-input type="color" label="color input"></z-input>
<z-input type="date" label="date input"></z-input>
<z-input type="datetime-local" label="datetime-local input"></z-input>
<z-input type="email" label="email input"></z-input>
<z-input type="month" label="month input"></z-input>
<z-input type="number" label="number input"></z-input>
<z-input type="password" label="password input"></z-input>
<z-input type="search" label="search input"></z-input>
<z-input type="tel" label="tel input"></z-input>
<z-input type="text" label="text input"></z-input>
<z-input type="time" label="time input"></z-input>
<z-input type="url" label="url input"></z-input>
<z-input type="week" label="week input"></z-input>

If you provide an unknown type, the component will default to the text type.

<z-input label="Yolo input" type="yolo"></z-input>

Value

The value attribute is watched and will change as the input value changes.

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

<z-input label="Text input with default value" value="default value"></z-input>

Required

The required attribute makes the input color turn red if no value is set.

<z-input label="Text input required" required></z-input>
<z-input label="Text input required" value="default value" required></z-input>

Disabled

The disabled attribute prevents the input from being used and gives it an understandable styling.

<z-input label="Text input disabled" disabled></z-input>
<z-input label="Text input disabled" value="default value" disabled></z-input>

Readonly

The readonly attribute prevents the input value from being changed without changing its styling.

<z-input label="Text input readonly" readonly></z-input>
<z-input label="Text input readonly" value="default value" readonly></z-input>

Accessibility

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

Events

z-change

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

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

<z-input id="change-event-input" label="Text input with z-change event"></z-input>
<p>Result: <b id="change-event-result"></b></p>

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

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

Result: