Fields
Every item in tabs[].rows[].columns[] is a DyonaFormField. Its minimum shape is:
{name: 'firstName', label: 'First name', type: 'text'}
name identifies the field and its value and must be unique within the form. label is visible text. type determines which control DYONA Form renders.
Available types
| Field type | Purpose | Value |
|---|---|---|
text | Single-line text input. | string or null |
number | Numeric input. | Normalized number or null |
date | Date input. | string or null |
datetime | Date and time input. | string or null |
select | Selection from predefined options. | string, number, or boolean according to an option's exact value; null or "" means no selection. |
autocomplete | Searchable selection from local or remote options. | string, number, or boolean; null or "" means no selection. |
checkbox | Boolean input. | boolean |
textarea | Multi-line text input. | string or null |
email | Email input with format validation. | string or null |
password | Password input with optional rules. | string or null |
link | Visual navigation element. | No form value |
label | Visual informational element. | No form value |
Minimum examples
// text
{name: 'name', label: 'Name', type: 'text'}
// number
{name: 'quantity', label: 'Quantity', type: 'number'}
// date
{name: 'startDate', label: 'Start date', type: 'date'}
// datetime
{name: 'scheduledAt', label: 'Scheduled at', type: 'datetime'}
// select
{name: 'status', label: 'Status', type: 'select', options: [
{value: 'active', label: 'Active'},
{value: 'inactive', label: 'Inactive'},
]}
// autocomplete: local options
{name: 'country', label: 'Country', type: 'autocomplete', options: [
{value: 'ar', label: 'Argentina'},
{value: 'br', label: 'Brazil'},
]}
// checkbox
{name: 'active', label: 'Active', type: 'checkbox'}
// textarea
{name: 'notes', label: 'Notes', type: 'textarea'}
// email
{name: 'email', label: 'Email', type: 'email'}
// password
{name: 'password', label: 'Password', type: 'password'}
// link
{name: 'help', label: 'View help', type: 'link', url: '/help', target: '_self'}
// label
{name: 'statusInfo', label: 'Customer status', type: 'label', severity: 'info'}
password can use optional passwordRules; see Validation for validation details. This overview intentionally covers only local autocomplete options.
link and label are visual, not data
link and label are visual fields and do not represent form data. Both retain a name for identity, layout, and conditions within the schema, but neither creates a key in DyonaFormValues, can appear in initialValues, or is included in onSubmit. link represents navigation; label represents visual information. label can use severity: info, success, warning, or error; info is the default. See Label for label-specific documentation.
Form values
Data fields produce entries in DyonaFormValues:
{
name: 'Ada',
quantity: 3,
active: true,
}
A number may be edited internally as text, but DYONA Form normalizes its value before onSubmit. This page focuses on the fields contract.
Common properties
Many fields can share properties such as required, disabled, readOnly, visible, fullWidth, tooltip, grid, placeholder, helperText, defaultValue, visibleWhen, requiredWhen, and validations.
They are not all valid for every field type. Some depend on the type, and both link and label have specific restrictions; not every common property is valid for visual/no-data fields. These properties are documented progressively in their corresponding sections.