Codey

Appearance

Password ​

INFO

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

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

Showcases ​

Note

Using the XerPassword component without the XerFormControl requires you to set the class="w-full" together with input-class="w-full" on the XerPassword component to make it full width.

Default ​

Meter details

The meter implemented by PrimeVue and more info can be found here

It is possible to change the labels in the meter overlay depending on locale. There are also 3 slots included to customize the overlay. Those are available in the Codey component. Read the PrimeVue docs for more info.

Without Strength Meter ​

With Show Mask ​

With Meter Overlay Template ​

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

Events ​

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

Slots ​

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