<EnformaField/> API

UsageAPI

Props

Prop	Type	Description
name	String	The field name (required)
label	String	Field label
inputComponent	String|Object	Component to use for rendering the input
hideLabel	Boolean	Whether to hide the field label
showLabelNextToInput	Boolean	Whether to show the label next to the input instead of above it
required	Boolean|String	Whether the field is required
useModelValue	Boolean	Whether to use update:modelValue event instead of input/change events (default: false)
help	String	Help text to display below the field
labelProps	Object	Additional props to pass to the label element
errorProps	Object	Additional props to pass to the error message element
helpProps	Object	Additional props to pass to the help text element
props	Object	Additional props to pass to the wrapper element
inputProps	Object	Additional props to pass to the input component
inputEvents	Object	Event handlers for the input component (input, change, blur, focus, update:modelValue)
rules	String	Validation rules using pipe notation (e.g., required|email)
messages	Object	Custom error messages for validation rules (e.g., { required: "This field is required" })
section	String	Name of the section this field belongs to (used in schema-based forms)
position	Number	Position of the field within its section (used in schema-based forms)

useModelValue

IMPORTANT

This prop is required by the input components that do not expose input and change events and instead use update:modelValue. Vuetify and Quasar do this for all their form components

This changes the way fields are marked as dirty which, in turn, determines when validation is triggered.

The ideal UX for validating a form field is the following: the field is validated after the user is done changing the field for the first time (i.e. on change) and everytime it changes the field afterward (i.e. on input).

However, when you are using update:modelValue the field must be validated on every change.

Use useModelValue to ensure the proper events are bound to the input when input and change events are not enough.

Slots

The EnformaField doesn't have slots because it is very simple. If you need to customize it for your app and the CSS options are not enough, you can

• extend the library with your own <AppField> component or
• create your own UI preset

Styling

The component uses the following props from the configuration:

• pt.wrapper - The outer wrapper div for the field
• pt.wrapper__invalid - Additional props applied to the wrapper when the field is invalid
• pt.wrapper__required - Additional props applied to the wrapper when the field is required
• pt.label - The label element
• pt.required - The required indicator component (see EnformaRequiredIndicator)
• pt.input - The input element
• pt.error - The error message element (supports HTML rendering when pt.error.renderAsHtml is true)
• pt.help - The help text element (supports HTML rendering when pt.help.renderAsHtml is true)