Codey

Appearance

Input Text ​

INFO

This component uses the input text 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 XerInputText component in combination with the XerFormControl component to have a complete UI with label, caption and error message etc.

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

Showcases ​

Default ​

As Date ​

WARNING

This is depricated in favor of the calendar component.

With Error message ​

With Icon ​

WARNING

This is depricated in favor of the XerInputIcon component.

Multiple Inputs ​

With Text Mask ​

WARNING

This is depricated in favor of the XerInputMask component.

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 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.