<AutoSuggest>

Displays an autosuggest component provides type-ahead search features. This is an SDK-only feature that can be connected to an arbitrary API.

To provide dynamic options use the <Formally onAutoSuggest={} /> prop.

Use of <AutoSuggest>

<AutoSuggest
  name="email"
  isRequired={false}
  labelHtml={{ en: 'Email' }}
  hintHtml={{ en: 'E.g. user@example.com' }}
  placeholder={{}}
  validationErrorRequiredHtml={{ en: 'Required ' }}
  validationErrorInvalidHtml={{ en: 'Invalid' }}
/>

<AutoSuggest>'s props

PropAboutType
hintHtml

Localisable HTML: hint content

E.g.

{
  en: 'Type their name to search',
}
LocalisedHtml
isRequired

Whether users are required to fill in this form field.

This setting affects aria-required and whether a * is displayed next to the form field, etc.

boolean
labelHtml

Localisable HTML: label content

E.g.

{
  en: 'Search people',
}
LocalisedHtml
name

The name attribute in HTML (MDN name attribute)

Name of the form control.

Submitted with the form as part of a name:value pair in the <Formally onSubmit> callback prop valuesAsFormNames.

string
placeholder

Localisable PlainText: placeholder content.

Placeholder content may cause accessibility problems as users can confuse it with their own form values. With autoComplete prefilling fields the placeholder value can be confusing.

Typically this should be left empty.

E.g.

{
  en: '',
}
LocalisedPlainText
validationErrorInvalidHtml

Localisable HTML: invalid validation content

LocalisedHtml
validationErrorRequiredHtml

Localisable HTML: required validation content

LocalisedHtml
id

Component Id.

Must be unique within the form.

string
hasChildrenById

Non-editable.

Used to indicate that this component doesn't have children.

false
hasTagsById

Non-editable.

Used to indicate that this component isn't a form field with tags by id.

false
isFormField

Non-editable.

Used to indicate that this component is a form field.

true
isMultichoice

Non-editable.

Used to indicate that this component isn't a multichoice form field like <Select>, <Radios> or <Checkboxes>.

false
type

Non-editable.

Type of component of "AutoSuggest".

"AutoSuggest"