Codey

Appearance

Textarea ​

INFO

This component uses the textarea from PrimeVue. It's full documentation can be found here. It does have some Codey specific features like automation ids, props and slots.

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.

javascript
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 Input Number can be provided. The full documentation can be found here.

Events ​

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

Slots ​

All slots from the Prime Input Number 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.