DXField
The single-field renderer that powers DXForm and
DXTable’s edit modal. It renders one FieldDefinition of any type — wired to
a useForm instance for value binding, validation state, and error display —
and exposes #value, #span, #info, and #hint slots for per-field
customisation.
You will usually reach for DXForm, but DXField is
available directly for one-off fields or custom layouts. It binds via a dot
path (keyPath), so it also works for nested values such as repeater rows
(lines.0.price).
Live Examples
Single Field Renderer
DXField renders one field of any type. DXForm and DXTable use it internally, but you can drop it in directly — here with per-field #hint and #value slot overrides.
Props
| Name Click to sort ascending | Type | Required Click to sort ascending | Default | Description |
|---|---|---|---|---|
field | FieldDefinition | Yes | - | The field definition to render (see DXForm for the full schema). |
form | UseFormReturn<any> | Yes | - | Form instance owning the field's data and errors. |
model | any | No | form.data | Model passed to predicates (label/hint/when/disabled/readonly). |
keyPath | string | No | field.key | Dot path into form.data for the value (e.g. lines.0.price for nested binding). |
errorKey | string | No | keyPath | Error key for validation lookups. |
Slots
| Name Click to sort ascending | Description | Scoped Props |
|---|---|---|
value | Replace the built-in input control with custom markup. Call update(v) to write the value. | - |
span | Full-width custom block (used when the field is marked span: true). | - |
info | Rich info block rendered below the field. | - |
hint | Override the hint text rendered below the field. | - |
Extended Component
This is a custom component that extends beyond simple Bootstrap Vue Next wrappers, providing additional functionality specific to Laravel dashboards.