Autosuggest

Examples
Standard suggestions
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Autosuggest
  id="id"
  label="I like to eat"
  onClear={function noRefCheck() {}}
  suggestions={[
    {
      onClear: function noRefCheck() {},
      text: "Apples"
    },
    {
      highlights: [],
      text: "Bananas",
      value: 0
    },
    {
      highlights: [],
      text: "Broccoli",
      value: 1
    },
    {
      highlights: [],
      text: "Carrots",
      value: 2
    }
  ]}
  value={{
    text: ""
  }}
/>
Standard suggestions with automatic selection
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Autosuggest
  automaticSelection={true}
  id="id"
  label="I like to eat"
  onClear={function noRefCheck() {}}
  suggestions={[
    {
      highlights: [],
      text: "Apples",
      value: 0
    },
    {
      highlights: [],
      text: "Bananas",
      value: 1
    },
    {
      highlights: [],
      text: "Broccoli",
      value: 2
    },
    {
      highlights: [],
      text: "Carrots",
      value: 3
    }
  ]}
  value={{
    text: ""
  }}
/>
Grouped suggestions
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Autosuggest
  id="id"
  label="I like to eat"
  onClear={function noRefCheck() {}}
  suggestions={[
    {
      label: "Fruit",
      suggestions: [
        {
          highlights: [],
          text: "Apples",
          value: 0
        },
        {
          highlights: [],
          text: "Bananas",
          value: 1
        }
      ]
    },
    {
      label: "Vegetables",
      suggestions: [
        {
          highlights: [],
          text: "Broccoli",
          value: 2
        },
        {
          highlights: [],
          text: "Carrots",
          value: 3
        }
      ]
    }
  ]}
  value={{
    text: ""
  }}
/>
Standard suggestions with an icon
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Autosuggest
  icon={<IconSearch />}
  id="id"
  label="I like to eat"
  onClear={function noRefCheck() {}}
  suggestions={[
    {
      highlights: [],
      text: "Apples",
      value: 0
    },
    {
      highlights: [],
      text: "Bananas",
      value: 1
    },
    {
      highlights: [],
      text: "Broccoli",
      value: 2
    },
    {
      highlights: [],
      text: "Carrots",
      value: 3
    }
  ]}
  value={{
    text: ""
  }}
/>
Standard suggestions with brand background and mobile backdrop
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Box background="brand" padding="small">
  <Autosuggest
    id="id"
    label="I like to eat"
    onClear={function noRefCheck() {}}
    showMobileBackdrop={true}
    suggestions={[
      {
        highlights: [],
        text: "Apples",
        value: 0
      },
      {
        highlights: [],
        text: "Bananas",
        value: 1
      },
      {
        highlights: [],
        text: "Broccoli",
        value: 2
      },
      {
        highlights: [],
        text: "Carrots",
        value: 3
      }
    ]}
    value={{
      text: ""
    }}
  />
</Box>
Autosuggest with error
Theme: seekAnz
You must make a selection
Theme: seekBusiness
You must make a selection
Theme: jobsDbRebrand
You must make a selection
Theme: jobsDb
You must make a selection
Theme: jobStreet
You must make a selection
Theme: jobStreetClassic
You must make a selection
Theme: wireframe
You must make a selection
Code:
<Autosuggest
  id="id"
  label="I like to eat"
  message="You must make a selection"
  onClear={function noRefCheck() {}}
  suggestions={[
    {
      highlights: [],
      text: "Apples",
      value: 0
    },
    {
      highlights: [],
      text: "Bananas",
      value: 1
    },
    {
      highlights: [],
      text: "Broccoli",
      value: 2
    },
    {
      highlights: [],
      text: "Carrots",
      value: 3
    }
  ]}
  tone="critical"
  value={{
    text: ""
  }}
/>

Required props

value
AutosuggestValue<Value>
suggestions
(Suggestion<Value> | GroupedSuggestion<Value>)[]
onChange
(value: AutosuggestValue<Value>) => void
id
string

Optional props

automaticSelection
boolean
showMobileBackdrop
boolean
scrollToTopOnMobile
boolean
onBlur
() => void
onFocus
() => void
placeholder
string
name
string
tone
"critical" | "positive" | "neutral"
disabled
boolean
label
ReactNode
secondaryLabel
ReactNode
tertiaryLabel
ReactNode
description
ReactNode
message
ReactNode
secondaryMessage
ReactNode
reserveMessageSpace
boolean
aria-describedby
string
data
Record<string, string | number>
onClear
() => void
autoFocus
boolean
icon
ReactNode
required
boolean

Further References