Form Control

The XerFormControl helps to create a form layout with support for a label, caption, error and character counter. It is also focussed on providing support for accessibility and guiding, you as a developer, in creating accessible forms.

Usage

When using a Form Component, you place it in the default slot of the XerFormControl. It is important to provide an id on the XerFormControl that matches that of the Form Components id. This will ensure that the input can be found by a getByLabel query used in test or a11y tools.

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

Note

In case you use a component without the XerFormControl, you need to place the correct aria-label on the underlying component input element. This is to ensure that the input can be found by a getByLabel query used in test or a11y tools.

Showcases

TODO

TODO: update showcases to the defaults of each component

With Auto Complete

With Calendar

With Dropdown

With Icon Field

With Input Mask

With Input Number

With Input Text

With Input Text and Character Counter

With Multi Select

With Password

Props

Name	Type	Default	Required	Description
id	String		true	The ID Value
dataAutomationId	String	() => id	false	The data automation id value
label	String		false	The label value.
caption	String		false	The caption value.
invalid	Boolean	false	false	If set to true, the textfield is invalid.
errorMessage	String		false	The error message value.
has-counter	Boolean	false	false	If set to true, the character counter will be visible.
counterLimit	Number	150	false	The max limit of characters for the character counter.
disabled	Boolean	false	false	If set to true, sets the visual disabled state of the component.

Events

Name	Parameters	Description
characterLimit		Emits every time the character limit has exceeded it's limit.

Slots

The slots are provided to give you an alternative option to set the content of the component.

Name	Purpose
default	Showing the form component content
label	Showing the label content
caption	Showing the caption content
errorMessage	Showing the error message content

Exposed Values

Name	Type	Description
counterExceeded	boolean	Exposes a computed boolean value that indicates if the counter limit has been exceeded or not.

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.