Z Web Components

Textarea

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

The <z-textarea> component uses only it's value attribute unlike the <textarea> that can use its innerHTML as a value.

<z-textarea label="Textarea"></z-textarea>

Attributes

Value

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

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

<z-textarea label="Textarea with default value" value="default value"></z-textarea>

Required

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

<z-textarea label="Textarea required" required></z-textarea>
<z-textarea label="Textarea required" value="default value" required></z-textarea>

Disabled

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

<z-textarea label="Textarea disabled" disabled></z-textarea>
<z-textarea label="Textarea disabled" value="default value" disabled></z-textarea>

Readonly

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

<z-textarea label="Textarea readonly" readonly></z-textarea>
<z-textarea label="Textarea readonly" value="default value" readonly></z-textarea>

Autoresize

The autoresize attribute makes the height of the textarea always the size of the text.

The height of the textarea will be re-calculated each time you type something, you resize the window, you display or hide the textarea.

Activating the autoresize attribute disables the ability to manualy resize the textarea.

<z-textarea 
    label="Textarea with autoresize" 
    value="Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, ipsa optio dolorem iusto numquam inventore vitae accusamus fugit impedit aperiam pariatur consectetur nostrum excepturi! Aliquam, neque a tempora magni obcaecati provident ipsam. Repellendus, dolores natus nemo praesentium sequi aliquid consectetur voluptate magnam fuga illum tempora odio nobis ut qui repudiandae porro nam blanditiis nisi distinctio quasi rem fugit, eos magni? Consectetur, dolor deserunt. Nemo culpa ratione aliquid! Nihil, corporis reprehenderit, quasi, velit veniam modi doloremque alias ipsum eaque magni amet? A magni placeat voluptas tenetur fuga commodi, temporibus possimus quos dolor deleniti fugit ratione consequatur? Labore nemo, molestias modi ipsa commodi accusamus cum dolores, enim soluta temporibus debitis libero ut porro aperiam dolor fugit dolore neque itaque! Provident, cupiditate ex. Atque laborum explicabo ipsa eligendi, quod dignissimos accusantium repudiandae voluptatibus quis harum sunt molestiae in dolores cupiditate."
    autoresize>
</z-textarea>

Accessibility

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

Events

z-change

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

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

<z-textarea id="change-event-textarea" label="Textarea with z-change event" autoresize></z-textarea>
<p>Result:</p> 
<p><b id="change-event-result"></b></p>

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

    $textarea.addEventListener('z-change', ({ detail }) => {
        $result.innerHTML = detail.value.replace(/\n/g, '<br>')
    })
</script>

Result: