Autocomplete

A field whose text finds an option in a list: a role="combobox" input with a role="listbox" below it (in a Portal, placed under the field and flipped for want of room), aria-activedescendant on the...

Source

A field whose text finds an option in a list: a role="combobox" input with a role="listbox" below it (in a Portal, placed under the field and flipped for want of room), aria-activedescendant on the highlighted option. It chooses one option, or several with multiple - each shown as a Chip - or, with shouldAllowFreeText, takes what is typed as a value. In a FormControl its FormLabel names it, and its size, color, error and disabled state apply. The words - clear, open, close, loading, nothing found - are yours: no built-in English.

import { Autocomplete } from '@soroush.tech/design-system/Autocomplete'

;<Autocomplete
  options={['Berlin', 'Lisbon', 'Oslo']}
  aria-label="City"
  noOptionsText="No city matches"
  onChange={(event, city) => setCity(city)}
/>

Examples

Default

const args: Partial<AutocompleteProps> = {
  variant: 'outlined',
  'aria-label': 'City',
  options: ['Berlin', 'Lisbon', 'Oslo', 'Rome'],
  noOptionsText: 'No city matches',
}

<Autocomplete {...args} options={CITIES} clearLabel="Clear" />

Multiple

Oslo

Rome

const args: Partial<AutocompleteProps> = {
  variant: 'outlined',
  multiple: true,
  'aria-label': 'City',
  options: ['Berlin', 'Lisbon', 'Oslo', 'Rome'],
  noOptionsText: 'No city matches',
}

<Autocomplete
  {...args}
  options={CITIES}
  defaultValue={['Oslo', 'Rome']}
  getRemoveLabel={(label) => `Remove ${label}`}
/>

Free Text

const args: Partial<AutocompleteProps> = {
  variant: 'outlined',
  shouldAllowFreeText: true,
  'aria-label': 'City',
  options: ['Berlin', 'Lisbon', 'Oslo', 'Rome'],
  noOptionsText: 'No city matches',
}

<Autocomplete {...args} options={CITIES} />

Grouped

const args: Partial<AutocompleteProps> = {
  variant: 'outlined',
  'aria-label': 'City',
  options: ['Berlin', 'Lisbon', 'Oslo', 'Rome'],
  noOptionsText: 'No city matches',
}

<Autocomplete<Country>
  {...(args as object)}
  options={COUNTRIES}
  groupBy={(country) => country.continent}
  getOptionLabel={(country) => country.label}
/>

Loading

const args: Partial<AutocompleteProps> = {
  variant: 'outlined',
  isLoading: true,
  'aria-label': 'City',
  options: ['Berlin', 'Lisbon', 'Oslo', 'Rome'],
  noOptionsText: 'No city matches',
}

<Autocomplete {...args} options={[]} loadingText="Loading..." />

Controlled

const args: Partial<AutocompleteProps> = {
  variant: 'outlined',
  'aria-label': 'City',
  options: ['Berlin', 'Lisbon', 'Oslo', 'Rome'],
  noOptionsText: 'No city matches',
}

<ControlledDemo {...args} />

In AForm Control

City

Where you live.

const args: Partial<AutocompleteProps> = {
  variant: 'outlined',
  'aria-label': 'City',
  options: ['Berlin', 'Lisbon', 'Oslo', 'Rome'],
  noOptionsText: 'No city matches',
}

<FormControl>
  <FormLabel>City</FormLabel>
  <Autocomplete {...args} aria-label={undefined} options={CITIES} />
  <FormHelperText>Where you live.</FormHelperText>
</FormControl>