Note
This documentation describes the FormFields Vue components for native UI views for Xml templates see form-field.
Form Fields — Overview
Form fields are ViewModel-bound input components. They automatically read property metadata (label, required status, validation messages, read-only state, format, min/max) from the ViewModel, removing the need for manual prop wiring.
Import
import {
BooleanFormField,
ColorFormField,
DateFormField,
DateTimeFormField,
EnumFormField,
FileFormField,
ImageFormField,
LocalizableStringFormField,
LookupFormField,
MaskFormField,
MultiSelectFormField,
NumberCalculableFormField,
NumberFormField,
PasswordFormField,
SliderDiscreteFormField,
StringArrayFormField,
StringFormField,
TimeFormField
} from '@neos/app'
Shared Props (FormFieldProps)
All form fields inherit these base props:
| Prop | Type | Required | Description |
|---|---|---|---|
propertyName |
string |
yes | Name of the ViewModel property to bind |
item |
Model |
no | Explicit item to use. Falls back to viewModel.current |
labelPosition |
'top' \| 'left' \| 'right' \| 'hidden' |
no | Label placement. Inherits from ViewModel default when not set |
messagePosition |
'bottom' \| 'hidden' |
no | Validation message placement |
focused |
boolean |
no | v-model for focus state |
Shared Emits
All form fields emit:
| Event | Payload | Description |
|---|---|---|
update:focused |
boolean |
Focus state change |
StringFormField
Renders a Textbox for string properties.
Additional Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows |
number |
undefined |
Enables textarea mode when set |
updateMode |
'default' \| 'immediate' |
'default' |
Update on blur/enter vs every keystroke |
clear |
boolean |
— | Show a clear button |
speech |
boolean |
— | Enable speech-to-text |
<StringFormField property-name="description" :rows="4" />
<StringFormField property-name="code" update-mode="immediate" :clear="true" />
NumberFormField
Renders an InputNumber for numeric properties. Reads format, minValue, maxValue from the property.
Additional Props
| Prop | Type | Default | Description |
|---|---|---|---|
alignment |
'left' \| 'right' |
'right' |
Text alignment |
step |
number |
undefined |
Increment/decrement step |
<NumberFormField property-name="price" /> <NumberFormField property-name="quantity" :step="1" />
NumberCalculableFormField
Like NumberFormField but supports calculable expressions in the input. No AI suggestion overlay.
<NumberCalculableFormField property-name="amount" />
DateFormField
Renders an InputDate for Date properties. Reads format, minValue, maxValue from the property.
<DateFormField property-name="birthDate" />
DateTimeFormField
Renders an InputDateTime for date+time properties.
<DateTimeFormField property-name="scheduledAt" />
TimeFormField
Renders an InputTime for time-only properties.
<TimeFormField property-name="startTime" />
BooleanFormField
Renders a DynamicCheckbox for boolean properties.
Additional Props
| Prop | Type | Default | Description |
|---|---|---|---|
trueLabel |
string |
— | Label for true value |
falseLabel |
string |
— | Label for false value |
nullLabel |
string |
— | Label for null value |
displayMode |
'switch' \| 'checkbox' \| 'radio' \| 'vertical-radio' |
— | Override the rendering mode |
<BooleanFormField property-name="isActive" display-mode="switch" />
<BooleanFormField property-name="approved" display-mode="radio" true-label="Yes" false-label="No" />
EnumFormField
Renders a DynamicCombobox for enum or list properties. Auto-reads enum members from the property definition.
Additional Props
| Prop | Type | Default | Description |
|---|---|---|---|
values |
unknown[] |
— | Override the option list |
valueProperty |
string |
— | Property for the bound value when using custom values |
displayProperty |
string |
— | Property for the display label when using custom values |
displayMode |
ComboboxDisplayMode |
— | Override rendering mode |
Slots
| Slot | Scope | Description |
|---|---|---|
value |
{ option } |
Custom selected value rendering |
option |
{ option } |
Custom option rendering |
<EnumFormField property-name="status" />
<EnumFormField property-name="priority" display-mode="select-button" />
MultiSelectFormField
Renders a MultiSelect bound to a collection value. When values is not provided, the component reads the enabled members of the enum property from the ViewModel metadata.
Bind the selected values with v-model:value.
Additional Props
| Prop | Type | Default | Description |
|---|---|---|---|
values |
unknown[] |
— | Option list. Omit it to use enabled enum members from property metadata. |
valueProperty |
string |
— | Property of each custom option used as the selected value. |
displayProperty |
string |
— | Property of each custom option displayed as its label. |
searchable |
boolean |
false |
Displays a search input in the dropdown. |
maxDisplayedChips |
number |
1 |
Maximum number of selected values displayed as chips. |
Slots
| Slot | Scope | Description |
|---|---|---|
chip |
{ option } |
Custom rendering for each selected chip. |
option |
{ option } |
Custom rendering for each option. |
<MultiSelectFormField property-name="statuses" v-model:value="selectedStatuses" />
<MultiSelectFormField
property-name="countryCodes"
v-model:value="selectedCountryCodes"
:values="countries"
value-property="code"
display-property="name"
:searchable="true"
:max-displayed-chips="3"
/>
LookupFormField
Renders a Lookup component for foreign key / reference properties.
<LookupFormField property-name="customerId" />
<LookupFormField property-name="categoryId" :item="customItem" />
ColorFormField
Renders an InputColor for string properties representing CSS colors.
<ColorFormField property-name="brandColor" />
FileFormField
Renders an InputFile for FileReference properties.
<FileFormField property-name="attachment" />
ImageFormField
Renders an InputImage for FileReference image properties.
<ImageFormField property-name="profilePicture" />
LocalizableStringFormField
Renders an InputLocalizableString for Record<string, string> (multi-language) properties.
Additional Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows |
number |
— | Enable textarea mode |
<LocalizableStringFormField property-name="title" />
<LocalizableStringFormField property-name="description" :rows="4" />
MaskFormField
Renders an InputMask for masked text properties (phone numbers, postal codes, etc.).
Additional Props
| Prop | Type | Required | Description |
|---|---|---|---|
mask |
string |
yes | Input mask pattern (e.g. '(999) 999-9999') |
updateMode |
'default' \| 'immediate' |
— | Update timing |
valueMode |
'raw' \| 'formatted' |
'raw' |
Whether the model value includes mask characters |
<MaskFormField property-name="phone" mask="(999) 999-9999" />
<MaskFormField property-name="postalCode" mask="99999-9999" value-mode="raw" />
PasswordFormField
Renders an InputPassword for password properties.
Additional Props
| Prop | Type | Default | Description |
|---|---|---|---|
revealable |
boolean |
true |
Show reveal toggle |
updateMode |
'default' \| 'immediate' |
'default' |
Update timing |
<PasswordFormField property-name="password" />
SliderDiscreteFormField
Renders an InputSliderDiscrete bound to a ViewModel property.
Additional Props
| Prop | Type | Required | Description |
|---|---|---|---|
values |
number[] |
yes | Allowed slider values (displayed as markers) |
isRange |
boolean |
no | Enables range mode |
trackColor |
string |
no | Color for the non-selected track segment |
selectedTrackColor |
string |
no | Color for the selected track segment |
selectedThumbColor |
string |
no | Color for the slider thumb(s) |
<SliderDiscreteFormField property-name="score" :values="[0, 25, 50, 75, 100]" />
<SliderDiscreteFormField
property-name="scoreRange"
:values="[0, 25, 50, 75, 100]"
:is-range="true"
track-color="#111111"
selected-track-color="#123456"
selected-thumb-color="#654321"
/>
StringArrayFormField
A dynamic list of text inputs for string array properties. Allows adding and removing rows.
<StringArrayFormField property-name="tags" />