Input Text

INFO

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

INFO

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

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

Showcases

Default

Multiple Inputs

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 XerInputText 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 XerInputText 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 XerInputText component.
• If needed, Add the counter-limit prop to the XerFormControl component to set the max limit of characters for the character counter.

Props

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

Events

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

Slots

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

Automation Ids

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