Textarea

INFO

This component uses the textarea from PrimeVue. Its full documentation can be found here.

INFO

It is recommended to use the XerTextarea component in combination with the XerFormControl component to have a complete UI with label, caption and error message etc.

import { XerTextarea } from "@xerius/codey-components";

Showcases

Default

With Error message

With Character Counter

Character Counter info:

Notice to get the character counter working, you will need to follow the following steps:

• Use the XerFormControl component and use the XerTextarea component as child component.
• Add the has-counter prop to the XerFormControl component.
• Set the input-value prop of the XerFormControl to the value of the reactive variable you use for the v-model of the XerTextarea component.
• Create a template reference to the XerFormControl component to listen to the exposed counterExceeded variable.
• Use this counterExceeded to toggle the invalid prop state of the XerTextarea component.
• If needed, Add the counter-limit prop to the XerFormControl component to set the max limit of characters for the character counter.

With Label Caption Slot

With Error Message Slot

As Disabled

Without Form Control

Note

Using a component directly without XerFormControl or <label> requires you to place the correct aria-label on the underlying component input element.

Props

All props from the Prime Textarea can be provided. The full documentation can be found here.

Events

All events from the Prime Textarea can be provided. The full documentation can be found here.

Slots

All slots from the Prime Textarea can be provided. The full documentation can be found here.

Automation Ids

A data-automation-id needs to be provided to the component as Prime Vue based components do not have a default data-automation-id.