Autocomplete Field

Text input with autocomplete suggestions sourced from a named list.

Preview

This component is progressively enhanced. Without JavaScript it renders as a standard <select> dropdown that works fully. With JavaScript enabled it becomes a searchable autocomplete.

To see the full experience, view our demo form which includes most components.

Select a country

JSON definition

{
  "type": "AutocompleteField",
  "name": "fieldName",
  "title": "Question title",
  "hint": "",
  "list": "",
  "shortDescription": "",
  "options": {}
}

Properties

Property	Type	Required	Description
`hint`	`string`	No	Hint text displayed below the field label to help the user answer the question.
`list`	`string`	Yes	Name of a list definition that provides the options to display. See list schema for the list definition format.
`shortDescription`	`string`	No	A short description of the field used in the check-your-answers summary.

Options

Property	Type	Required	Description
`classes`	`string`	No	Additional CSS classes applied to the component.
`condition`	`string`	No	Name of a condition that controls whether this component is shown.
`customValidationMessages`	`object`	No	A map of Joi error codes to custom error messages.
`instructionText`	`string`	No	Alternative text read by screen readers in place of the field title.
`optionalText`	`boolean`	No	When `true`, appends '(optional)' to the field label.
`required`	`boolean`	No	Whether the field must be filled in. Defaults to `true`.
`type`	`string`	No	Display style for the list: `'bulleted'` or `'numbered'`.