Autocomplete

The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options.

Examples

Use to help merchants complete text input quickly from a list of options.

Drag to resize example

Props

actionBefore
ActionListItemDescriptor
An action to render above the list of options
allowMultiple
boolean
Allow more than one option to be selected
emptyState
React.ReactNode
Is rendered when there are no options
id
string
A unique identifier for the Autocomplete
listTitle
string
Title of the list of options
loading
boolean
Display loading state
optionsRequired
OptionDescriptor[]
Collection of options to be listed
preferredPosition
"above" | "below" | "mostSpace"
The preferred direction to open the popover
selectedRequired
string[]
The selected options
textFieldRequired
ReactElement
The text field component attached to the list of options
willLoadMoreResults
boolean
Indicates if more results will load dynamically
onLoadMoreResults
() => void
Callback when the end of the list is reached
onSelectRequired
(selected: string[]) => void
Callback when the selection of options is changed

Best practices

The autocomplete component should:

  • Be clearly labeled so it’s obvious to the merchant what type of options will be available
  • Limit the number of options displayed at once
  • Not be used within a popover
  • Indicate a loading state to the merchant while option data is being populated

Content guidelines

Input field