FieldDTO

The FieldDTO type defines an individual field within a section of a form. It specifies the field's type, label, validation, layout, and other properties.

Properties

Name	Type	Description
id	string	Unique identifier for the field (unique across the whole form, including nested group/array fields).
type	InputType	"text" | "email" | "password" | "textarea" | "number" | "select" | "checkbox" | "date" | "autocomplete" | "multi-autocomplete" | "radio" | "group" | "array".
label	I18nString	Field label — a plain string or a { locale: string } map.
placeholder	I18nString?	Placeholder text (optional).
options	I18nOption[] | I18nString[]?	Options for select/autocomplete fields (optional).
disabled	boolean?	Whether the field is disabled (optional).
defaultValue	any?	Default value for the field (optional).
layout	LayoutDTO?	Field-level layout — { cols?, gap?, direction?, align?, justify? } (optional).
validations	Validations?	Validation rules for the field (optional). See the Validation guide.
visibleWhen	Condition?	Conditional visibility rule. See VisibleWhen.
fields	FieldDTO[]?	Nested field definitions — only used by "group" and "array". See Nested & Repeatable Fields.

TIP

There is no top-level required property — put required inside validations.

"group" and "array" fields

const field: FieldDTO = {
  id: "address",
  type: "group",
  label: "Address",
  fields: [
    { id: "street", type: "text", label: "Street" },
    { id: "city", type: "text", label: "City" },
  ],
};

• "group": nested fields keep their own top-level id in the form's flat values object — it's a visual/logical grouping only.
• "array": fields is the template for one repeatable item; the whole list is stored as values[field.id]: Record<string, any>[].

See the Nested & Repeatable Fields guide for the full walkthrough and current limitations.

Example

const field: FieldDTO = {
  id: "firstName",
  type: "text",
  label: "First Name",
  placeholder: "Enter your first name",
  validations: {
    required: true,
    minLength: 2,
    maxLength: 30,
    pattern: /^[A-Za-z]+$/
  }
};