Autocomplete

Try it live

Open Autocomplete in the Lab →

What local autocomplete is

Both select and autocomplete can use local options. autocomplete adds interactive search across those options. For a purely local autocomplete, define options and do not use optionsSource.

Basic example

{
  name: 'salesRepresentative',
  label: 'Sales representative',
  type: 'autocomplete',
  options: [
    {value: 101, label: 'Alex Morgan'},
    {value: 102, label: 'Taylor Reed'},
    {value: 103, label: 'Jordan Lee'},
  ],
}

label vs value

label is what the user sees and searches. value is what DYONA Form stores in DyonaFormValues. Selecting Taylor Reed produces:

{salesRepresentative: 102}

It does not produce {salesRepresentative: 'Taylor Reed'}.

Supported option values

Option values may be string, number, or boolean, and comparisons are strict. These are different values:

{value: 1, label: 'North'}
{value: '1', label: 'Legacy North'}

Search behavior and no free text

Users can type to filter local options by their visible text. An autocomplete is not a free-text field: a user must select a valid option. Text that does not correspond to a valid selection does not become a form value.

Required and optional values

null and "" represent no selection. With required: true, a valid selection is required; see Validation for validation behavior.

Local options contract

Each option has this public shape:

{label: string; value: string | number | boolean}

label must be a non-empty string. String values must be non-empty, and number values must be finite.

defaultValue

defaultValue: 102 selects Taylor Reed when an option has exactly value: 102. The type must match exactly: 102 and '102' are different values.

select vs autocomplete

Use	select	autocomplete
Few options	Good	Good
Search by typing	No	Yes
Local options	Yes	Yes
Free text	No	No
Stored result	option.value	option.value

Use select for short lists that are easy to scan. Use autocomplete when a longer local list benefits from typing to search.

Complete example

{
  name: 'salesRepresentative',
  label: 'Sales representative',
  type: 'autocomplete',
  required: true,
  options: [{value: 102, label: 'Taylor Reed'}],
}
{
  name: 'customerSegment',
  label: 'Customer segment',
  type: 'autocomplete',
  required: true,
  options: [{value: 'enterprise', label: 'Enterprise'}],
}

The submitted values are {salesRepresentative: 102, customerSegment: 'enterprise'}.

Next steps

• Fields
• Validation
• Conditions

Remote data loading is covered in the next dedicated chapter.