DXForm

The canonical form renderer. Drive it with field definitions; add tabs when you need a multi-tab editor. Flat and tabbed forms share one engine (DXField), so every field type, conditional field, per-field slot override, async option, and nested repeater works the same in both.

It works with the fetch-based useForm composable (no Inertia required) and accepts either a useForm return or a defineForm return (with the latter, fields may be omitted).

Live Examples

Product Editor

A tabbed form with conditional fields, a currency input, and auto-switching to the tab containing the first validation error.

Props

Name Click to sort ascending	Type	Required Click to sort ascending	Default	Description
`form`	`UseFormReturn<any> \| DefineFormReturn<any>`	Yes	-	Form instance from useForm, or the { form, fields } object from defineForm.
`fields`	`FieldDefinition[]`	No	-	Field definitions. Optional when form is a defineForm return (taken from it).
`tabs`	`FormTab[]`	No	-	Tab definitions. When omitted, a flat single-column form renders.
`context`	`Record<string, any>`	No	-	Extra context merged under the live form data when evaluating predicates (label/hint/when/disabled).
`activeTab`	`number (v-model)`	No	`0`	Active tab index. Two-way bindable via v-model:active-tab.
`autoErrorTab`	`boolean`	No	`true`	Auto-switch to the first tab containing a validation error.
`submitText`	`string`	No	`Submit`	Submit button text.
`submitLoadingText`	`string`	No	`Submitting...`	Submit button loading text.
`showSubmit`	`boolean`	No	`true`	Show the submit button.

Events

Name Click to sort ascending	Parameters	Description
`submit`	none	Emitted when the form is submitted (run your form.post/put in the handler).

Slots

Per-field slots are keyed by field key, e.g. #value(price) or #hint(sku).

Name Click to sort ascending	Description	Scoped Props
`value(<key>)`	Replace a field's input control with custom markup.	-
`span(<key>)`	Full-width custom block for a field marked span: true.	-
`info(<key>)`	Rich info block rendered below the field.	-
`hint(<key>)`	Override the hint text rendered below the field.	-
`repeater-row(<key>)`	Custom row layout for a repeater field.	-
`tab-content(<key>)`	Replace the entire body of a tab.	-
`tab-before(<key>)`	Content rendered before a tab's fields.	-
`tab-after(<key>)`	Content rendered after a tab's fields.	-
`footer`	Content rendered after the form body.	-

Field definitions

Each field is a FieldDefinition. Supported type values:

Type	Renders
`text`, `email`, `password`, `number`, `url`, `tel`, `date`, `datetime-local`, `datetime`, `time`	Native input
`textarea`	Multi-line input
`select`	Dropdown (sync `options` or async `optionsLoader`)
`radio`	Radio group
`checkbox`	Single checkbox
`currency`, `percentage`	Numeric input with a `£`/`%` affix
`image`, `file`	File input (`image` shows a preview)
`component`	Renders your `field.component` (escape hatch)
`repeater`	Nested, repeatable sub-form (see DXRepeater)

Common options beyond key/type/label:

Name Click to sort ascending	Type	Required Click to sort ascending	Default	Description
`label / hint`	`string \| (model) => string`	No	-	Static or model-derived label and hint text.
`when`	`boolean \| (model) => boolean`	No	`true`	Conditional visibility, evaluated reactively against the live model.
`readonly`	`boolean \| (model) => boolean`	No	`false`	Render the field read-only.
`disabled / disabledWhen`	`boolean \| (model) => boolean`	No	`false`	Disable the field, statically or from the model.
`options / optionsLoader`	`FieldOption[] \| (model) => Promise<FieldOption[]>`	No	-	Select/radio options, synchronous or async. Set reloadOptionsOnChange to refetch on model change.
`span`	`boolean`	No	`false`	Render full-width, delegating content to the #span(<key>) slot.
`currencySymbol / accept / step / min / max`	`string \| number`	No	-	Type-specific options (currency symbol, file accept, numeric bounds).

A FormTab is { key, label?, fieldKeys, when?, lazy? }. Tabs whose when is false — or that have no visible fields and no custom tab slot — are hidden automatically.

Extended Component

This is a custom component that extends beyond simple Bootstrap Vue Next wrappers, providing additional functionality specific to Laravel dashboards.