Forms

This page shows the field shell, field and form feedback, and form layouts in the default theme. Components describes the rules every component page shares.

Field shell

Field is the layout container for one field. It holds a FieldLabel and a FieldContent column. The column stacks the control, an optional FieldDescription, and any FieldMessage. FieldGroup stacks several fields with even spacing.

The orientation prop sets the layout:

Value	Layout
vertical (default)	Label above the content column.
horizontal	Label beside the content column. The label width is capped so the content keeps room.
responsive	Vertical in a narrow FieldGroup, horizontal in a wide one. It needs a FieldGroup ancestor, because it responds to that group's width.

FormField, the default Form Field, builds this shell from the field's label, help text, and messages. While the field's widget is disabled, FormField sets data-disabled="true" on the Field, and the label dims. For a required field it appends an asterisk to the label, hidden from assistive technology. The asterisk is part of FormField's markup, so no theme key reaches it. To change the indicator, replace the label through the field(<name>)label slot, which receives label and required. The demo composes its chip and "optional" markers that way.

Theme keys: Field, FieldLabel, FieldContent, FieldDescription, FieldGroup.

Field feedback

FieldMessage shows a field's messages below the control. Its severity prop sets the color and the ARIA role:

severity	Color	Role
error (default)	--destructive	alert
warning	--warning	status

The messages prop takes strings, arrays of strings, or objects with a message property. FieldMessage drops duplicates. One message renders as text; several render as a list. With no messages, nothing renders.

FormField renders the field's errors, then its warnings, each through a FieldMessage. The control carries its own bottom edge line. aria-invalid="true" on the input marks the edge line invalid, and data-warning="true" marks it as a warning; an invalid state outranks a warning. Inputs shows the focus, disabled, and read-only states of the input shell. The valid and loading cards below are compositions: FormField renders no valid or pending indicator.

Two FormField props remove parts of the shell:

• hideLabel drops the label. Help text, errors, and warnings still render below the control. FieldSetTabularInline sets it, because its column headers (or card headers on narrow screens) name each field.
• hidden renders the widget alone, with no label, help text, or messages. ActionForm lists that field's errors in its validation summary.

VUEDA ships no compact feedback indicator for tight layouts. The theme registry has a FormHiddenFeedback key, but no component reads it, so its values have no visible effect.

Theme keys: FieldMessage, Input.

Form feedback

FormMessage renders the form's Non-Field Error messages as one Alert. It reads them from the Form Context and renders nothing when there are none. Its type prop picks the messages and the Alert variant:

type	Messages	Alert variant
error (default)	Non-field errors	destructive
message	Non-field warnings	warning

One message renders as text inside the Alert. Several render as a list inside the same Alert. A message that is an object renders one name: value line per key. The default slot receives message and replaces how each message renders.

Theme keys: FormMessage, Alert.

Long-form layout

This demo builds a multi-section form from plain section markup, grids, and the field shell. Each section has a titled header and a divider, and its fields sit in a grid that collapses to one column on narrow screens. VUEDA's layout components for the same structure are FormSection, FormSectionTitle, and FormGrid; the demo does not use them.

Auth patterns

The auth views place their form in a framed card, with the same field shell as any other form. The sign-in and two-factor views use AuthorizingForm, which centers the card in the viewport. The change-password, device setup, and recovery-code views use AuthForm, which places the card at the top of the page, below the page title. Both cards have the same width cap.

The demos below compose field primitives by hand, so they show the pattern and can differ from the shipped views. Auth & MFA Views shows the shipped views, and Build Auth Views describes the flows.

Theme keys: AuthorizingForm, AuthForm.

Action form

ActionForm renders an action's confirmation form in the page flow. From top to bottom it shows:

1. An error display for failed fetches and failed action runs.
2. The form-scope feedback block: a FormMessage for non-field errors, a validation summary, and a FormMessage with type="message" for non-field warnings. The summary lists field errors that no rendered field shows, such as errors on hidden fields. The validation-summary slot replaces the summary.
3. The form body, from the action-form-inner slot.
4. The action bar with the confirm and cancel buttons, from the action-bar slot.

ActionForm disables the confirm button while the action runs and while the form has client-side validation errors. Server Feedback, including errors from a failed Dry Run, leaves it enabled. A Warning Confirmation opens a dialog over the form.

ModelActionForm wraps ActionForm for model actions. It adds a banner, the list of selected records, and the confirmation prompt inside the form body. The demos below are compositions of those parts.

Theme keys: ActionForm, ModelActionForm.

Repeated values: FieldSetMany

FieldSetMany edits a list of values, with Add and Remove controls. You can remove any entry, including the first and last. An optional list can be empty; a required list reports a list-level error when empty. Each added entry requires a value. Read-only lists disable Add and Remove.

The fieldset heading labels the list. Per-entry labels stay available to assistive technology, and the default theme hides them visually so the heading is not repeated. Remove aligns with the first control row, so validation messages below an input do not move its button. The FieldSetMany.rows, FieldSetMany.component, and FieldSetMany.removeButton theme slots control this layout.

This example sets contextless and binds v-model to keep its draft local to the demo. Inside a form, the component edits the array at its name path. Removing an entry shifts indexed feedback with the remaining values, through the removeArrayItem(name, index) method of the form context that useForm returns.