Form
The e-form component centralizes the behavior of the fields inside it. It can propagate shared configuration such as outlined, disabled, readonly, retainColor, manage submit-time validation, expose validation methods, and switch into table layout mode when forms need stronger structure.
This page shows how Form takes control of its children from a single point to unify state, appearance, and validation, and how e-form-column extends that orchestration layer when the flow needs actions and additional structure.
Usage
Use this playground to see how a single Form applies shared behavior across multiple fields at once. The preview shows the effect of outlined, disabled, readonly, and retainColor on the same input group, while the color selector updates the presentation of the whole set.
Shared form behavior
One parent controls multiple child fields
Inherited child behavior
This preview shows how Form pushes shared configuration into compatible fields without repeating the same prop on every child. Here the parent applies labelBehavior with the floating value and outlined once to keep the same visual treatment across textfields, selects, and textareas inside the block.
Table layout
This preview shows Form in table mode to present an operational data block with a more rigid structure. The example applies fieldColor with primary and labelBehavior with floating, while the same matrix renders ticketId, assignee, environment, and requiresApproval inside a structured approval card.
Structured approval form
Table layout for dense business inputs
Form column and actions
This preview shows how e-form-column reserves its own row inside Form to align actions without breaking the form grid. After the Workflow name and Owner fields, the column pushes the primary CTA to the far right while keeping the action inside the same visual flow as the rest of the block.
Action layout with Form Column
Group fields and actions without breaking alignment
Validation lifecycle
This preview shows a validation flow governed by Form at submit time. The container enables validate-on-submit and focus-first-invalid, evaluates rules for subject, message, and policyAccepted, and updates the top feedback state depending on whether submit or submit-invalid fires.
Submit-time validation flow
Submit the form to test validation lifecycle events.
Exposed methods
This preview shows how to control a Form instance from explicit actions outside the native submit path. The buttons trigger validate() to inspect whether the block is valid and resetValidation() to clear error messages, while the text above summarizes the last action result.
Programmatic form control
Choose an action to inspect the form instance behavior.
Props
Use the API table as the source of truth for accepted props, defaults, emitted events, and behavior notes.
| Property | Type | Default |
|---|---|---|
| modelValue | boolean | undefined | undefined |
Current form validity state emitted through v-model. | ||
| lazy | boolean | false |
Reserved form option for deferred validation flows. | ||
| focusFirstInvalid | boolean | false |
Moves focus to the first invalid child field after validation fails. | ||
| validateOnSubmit | boolean | false |
Runs child validation automatically before emitting submit. | ||
| outlined | boolean | false |
Propagates outlined presentation to compatible child fields. | ||
| disabled | boolean | false |
Propagates disabled state to compatible child fields. | ||
| readonly | boolean | false |
Propagates readonly state to compatible child fields. | ||
| labelBehavior | FieldLabelBehavior | undefined |
Shared label behavior pushed into compatible child fields. | ||
| labelMinWidth | string | number | undefined |
Applies a shared minimum label width when child fields render aligned labels. | ||
| retainColor | boolean | false |
Preserves semantic field color across compatible child fields. | ||
| fieldColor | string | undefined |
Sets the shared color pushed into compatible child fields. When both fieldColor and color are provided, fieldColor wins for inherited child field color. | ||
| color | string | undefined |
Fallback color used for inherited child field color when fieldColor is not provided. In table mode it can also act as the legacy source for separator color when tableLineColor is unset. | ||
| table | boolean | false |
Enables structured table-style layout treatment for child fields. | ||
| tableLineColor | string | undefined |
Overrides the separator color used in table mode. | ||
| tableCellBackgroundColor | string | undefined |
Sets the background color applied to table-mode field cells. | ||
| tableFieldColor | string | undefined |
Legacy alias used to resolve table cell background treatment. | ||
| tableLineOpacity | string | number | undefined |
Adjusts separator opacity in table mode. | ||