Suggestions will appear below the field as you type
Open in Playroom

Alternatives

Additional labels

Supports all three levels of FieldLabel:
  • label — primary title of the field,
  • secondaryLabel — additional context, typically used to indicate optionality of a field,
  • tertiaryLabel — further context, typically used for providing assistance with a field.
 Help
Suggestions will appear below the field as you type
Open in Playroom

Message and tone

A message is typically used to communicate the status of a field, such as an error message. This will be announced on focus of the field and can be combined with a tone to illustrate its purpose.The supported tones are: "critical", "positive", "caution", and "neutral".
Critical message
Suggestions will appear below the field as you type
Positive message
Suggestions will appear below the field as you type
Caution message
Suggestions will appear below the field as you type
Neutral message
Suggestions will appear below the field as you type
Open in Playroom

Field description

Additional context can be provided with a description. This will display below the field label and also be announced by a screen reader when the field is focused.
Extra information about the field
Suggestions will appear below the field as you type
Open in Playroom

Disabled field

Mark the field as disabled by passing true to the disabled prop.
Suggestions will appear below the field as you type
Open in Playroom

Placeholder prompt

Providing a placeholder will display as a prompt to the user when no value is selected.
Suggestions will appear below the field as you type
Open in Playroom

Clearing the field

A clear icon button will appear in the field when the user has entered text. You must pass a function to the onClear prop, which will be called when the button is clicked.Translation hint The aria-label for the clear button can be customised by providing a clearLabel prop.
Suggestions will appear below the field as you type
Open in Playroom

Automatic selection

You can automatically select the first suggestion when blurring the field using the automaticSelection prop. Note that this only occurs when text has been entered into the field to prevent irrelevant suggestions being selected.This is designed for scenarios where you’re effectively selecting an item from a list rather than entering free text, e.g. selecting a location.
Suggestions will appear below the field as you type
Open in Playroom

Grouped suggestions

Suggestion items can optionally be nested into groups.
Suggestions will appear below the field as you type
Open in Playroom

Suggestion descriptions

Suggestion items can optionally contain a description.
Suggestions will appear below the field as you type
Open in Playroom

Suggestion highlights

Suggestion items can be highlighted based on the input value using the suggestionHighlight prop. Choose between highlighting the matching or remaining portion of each suggestion.
Highlight matchingApples and Bananas
Highlight remainingApples and Bananas
If suggestionHighlight is not suitable for your use case, you can provide explicit highlight ranges for each suggestion.
Suggestions will appear below the field as you type
Open in Playroom

Client-side filtering

The logic for filtering suggestions typically lives on the server rather than the client because it’s impractical to send all possible suggestions over the network. However, when prototyping in Playroom or working with smaller datasets, you may want to perform this filtering on the client instead.For this case, we provide a filterSuggestions function to make this as painless as possible. This also handles highlights for you, using suggestionHighlight set to matching.If filtering is being performed on the server, this can be safely omitted.

Clearable suggestions

Suggestion items can be made clearable using the onClear property on suggestion objects. This is particularly useful for giving users the ability to clear recent entries.Translation hint The aria-label for the clear suggestion button can be customised by providing a clearLabel in the suggestion object.
Suggestions will appear below the field as you type
Open in Playroom

Mobile support

An overlay can optionally be displayed behind the field on mobile using the showMobileBackdrop prop.Additionally, you can also scroll the field to the top of the viewport on focus using the scrollToTopOnMobile prop.
Suggestions will appear below the field as you type
Open in Playroom

Messaging when no suggestions are available

If no suggestions are available and you’d like to provide messaging to the user, you can provide it via the noSuggestionsMessage prop.A simple message can be shown by providing a single piece of text. Alternatively, a more structured prompt can be shown by providing an object containing title and description.
Focus the field to see a simple message
Suggestions will appear below the field as you type
Focus the field to see more structured prompt
Suggestions will appear below the field as you type
Open in Playroom

Indirect or hidden field labels

In some cases it may be necessary for a field to be labelled by another element or even not to have a visual label. Instead of providing a label either aria-label or aria-labelledby can be provided.

Custom field label

Suggestions will appear below the field as you type
Suggestions will appear below the field as you type
Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Autosuggest
  data={{ testid: 'autosuggest-1' }}
  // => data-testid="autosuggest-1"
/>