Input Mask

INFO

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

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

The InputMask component supports common used masks out of the box which can be set through the mask prop. The following masks are currently custom made for the Xerius applications and exported:

name	example	type
belgischeIbanMask	BE45 4656 4564 5464	string
rijksregisternummerMask	12.34.56-789.12	string

import { belgischeIbanMask, rijksregisternummerMask } from "@xerius/codey-components";

Showcases

Default

Belgische Iban

Rijksregisternummer

With error message

As Disabled

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