Fields
Configure specific fields of your form
Nuxt Auto Form uses the config by default to detect the proper components for each field Sometimes, however, you may need to override this, customize labels, descriptions, or other properties.
Background
Nuxt Auto Form leverages Zod 4’s metadata system component that wraps each input.
You can use the meta() function to attach additional configuration to any Zod field.
FormField Customization
Fields below are used to customize the FormField component wrapping each field.
They map directly to properties inside UFormField Nuxt UI component.
title
string | null
Field label displayed in the form's label row. Maps directly to
If not provided, it defaults to the field name with capitalization and spaces.
Set to
UFormField.label.If not provided, it defaults to the field name with capitalization and spaces.
Set to
null to hide the label for this specific field.required
string
Marks the field as required in the UI (asterisk, aria-required).
Validation is not enforced here; use
zod refinements for that.description
string
Supporting text displayed between the label and the input control
hint
string
Short inline hint shown next to the label.
help
string
Help text displayed below the input field.
All string values in
meta() support preprocessors. Use the $i18n: prefix to integrate with vue-i18n, or define your own custom transformations.Input customization
Use the input property to customize the actual input component:
input?: {
component?: string | Component
props?: Record<string, any>
}
You can use it to override default properties or even replace the default component with a custom one.
If you use string to define the component it must be globally registered to work.
To do this, name your component with the
.global.vue suffix, or place it in components/global/ directory.Styles
You can customize the appearance of form fields:
/** Auto-form specific configuration */
theme?: {
/** Float the input box to the right of the label */
floatRight?: boolean
wFull?: boolean
}