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, #info-popover, 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.

Price

The list price before tax.

This is the default VAT rate

Not featured

Allergens

Celery

Cereals containing gluten

Crustaceans

Eggs

The model is an array of the on rows' values.

Plan Currently selected: pro

Branch Pick a suggestion or type your own: main

Password

The reveal toggle is on by default — set revealable: false for a bare input.

Usernameplaintext renders the value as static text rather than a control you cannot use.

Rating

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 always-visible below the field (not the label popover).	-
`info-popover`	Rich body for the label’s hover/focus info popover (lists, bold, paragraphs). Overrides the plain field.info text.	-
`hint`	Override the hint text rendered below the field.	-

Display-only and password field options

Two FieldDefinition options change how a control is rendered rather than what it holds (the full schema lives on the DXForm page):

Name Click to sort ascending	Type	Required Click to sort ascending	Default	Description
`plaintext`	`boolean \| (model) => boolean`	No	`false`	Display the value as static text instead of a control — no border, no input box (Bootstrap’s .form-control-plaintext). Implies read-only for every field type: anything backed by a real input (the text family, textarea, currency, percentage, autocomplete) renders as static text, while control types with no native readonly state (select/radio/checkbox/switch/file) are disabled instead.
`revealable`	`boolean`	No	`true`	Only for type: "password". Shows the reveal (eye) toggle that switches the input between masked and plain text. Set false for a bare password input.

readonly is unchanged: it still renders a bordered, non-editable control, which reads as “you could edit this, but can’t”. Use plaintext for values a profile/settings page shows but never lets you edit.

revealable is on by default, so every password field gets the eye toggle unless you opt out.

inputProps remains an escape hatch that wins over the field’s own bindings — inputProps: { readonly: true } works as before — but it cannot override the guarantees these two options make. A plaintext field cannot be made editable through it, and the reveal toggle owns the password input’s type, so an inputProps type cannot unmask a field whose toggle still reads “Show password”.

A revealed password is also re-masked whenever the field is reseeded with a different record, which is what DXTable’s edit modal does between rows.

const fields = [
  // Static text, no input box.
  { key: 'email', label: 'Email', type: 'text', plaintext: true },

  // Editable until the record is verified, then display-only.
  { key: 'vat_number', label: 'VAT number', type: 'text', plaintext: (model) => model.verified },

  // A bare password input, without the reveal toggle.
  { key: 'password', label: 'Password', type: 'password', revealable: false },
];

Extended Component

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