Autocomplete

The autocomplete component gives users suggestions when choosing one or more values from a predefined list. It should be used where users have to select from a longer, searchable list of items.

To see the autocomplete component in action, check out the input patterns.

import Autocomplete from "@ds-kit/autocomplete"

Basic example

For the most basic example, pass in a list of objects with a value and a label key to the autocomplete.

Start typing to search...
<>
  <Autocomplete
    options={[
      { value: "AGO", label: "Angola" },
      { value: "COL", label: "Colombia" },
      { value: "SWE", label: "Sweden" },
      { value: "TZA", label: "Tanzania" },
    ]}
    mb="12rem"
  />
</>

Virtualized example

For long list of options, use virtualized version of Autocomplete to maintain performance.

import { AutocompleteVirtualized } from "@ds-kit/autocomplete"
Start typing to search...
<AutocompleteVirtualized
  options={new Array(5000).fill().map((d, i) => ({
    value: `${i}`,
    label: !i
      ? `Element with a very very very long label or even much longer one #${i}`
      : `Element #${i}`,
  }))}
  mb="22rem"
/>

Raised Autocomplete

The autocomplete can take a raised prop to make it stand out a bit more on a page. Use the raised version of the autocomplete when placing the autocomplete on colored backgrounds.

Start typing to search...
<Div bg="green.400" py="2rem" px="1.5rem">
  <Autocomplete
    raised
    options={[
      { value: "AGO", label: "Angola" },
      { value: "COL", label: "Colombia" },
      { value: "SWE", label: "Sweden" },
      { value: "TZA", label: "Tanzania" },
    ]}
    mb="12rem"
  />
</Div>

Multiselect Autocomplete

Start typing to search...
<>
  <Autocomplete
    isMulti
    options={[
      { value: "AGO", label: "Angola" },
      { value: "COL", label: "Colombia" },
      { value: "SWE", label: "Sweden" },
      { value: "TZA", label: "Tanzania" },
    ]}
    mb="12rem"
  />
</>

Limited selected value width

In the case of very long labels, you can use the valueMaxWidth prop to limit the size of the selected value containers in the multiselect.

Start typing to search...
<>
  <Autocomplete
    isMulti
    valueMaxWidth="8rem"
    options={[
      { value: "AGO", label: "Angola" },
      { value: "DRC", label: "Democratic Republic of the Congo" },
      { value: "COL", label: "Colombia" },
      { value: "SWE", label: "Sweden" },
      { value: "TZA", label: "Tanzania" },
    ]}
    mb="14rem"
  />
</>

Sizes

Use the size prop to determine the overall size of the autocomplete. The available options (sm, md, lg) are aligned with other control elements, such as buttons and textfields.

Start typing to search...
Start typing to search...
Start typing to search...
<>
  <Autocomplete
    isMulti
    size="lg"
    options={[
      { value: "AGO", label: "Angola" },
      { value: "COL", label: "Colombia" },
      { value: "SWE", label: "Sweden" },
      { value: "TZA", label: "Tanzania" },
    ]}
    mb="14rem"
  />

  <Autocomplete
    isMulti
    size="md"
    options={[
      { value: "AGO", label: "Angola" },
      { value: "COL", label: "Colombia" },
      { value: "SWE", label: "Sweden" },
      { value: "TZA", label: "Tanzania" },
    ]}
    mb="12rem"
  />

  <Autocomplete
    isMulti
    size="sm"
    options={[
      { value: "AGO", label: "Angola" },
      { value: "COL", label: "Colombia" },
      { value: "SWE", label: "Sweden" },
      { value: "TZA", label: "Tanzania" },
    ]}
    mb="10rem"
  />
</>

Autocomplete props

Name
Type
Default
options
array
suggestions
size
"sm""md""lg"
"md"
raised
bool
valueMaxWidth
string
"none"
placeholder
string
"Start typing to search..."
visibleOptionsCount
number
3
isMulti
bool
components
object
{}
width
stringnumberarray
"100%"
m
stringnumberarray
mx
stringnumberarray
my
stringnumberarray
ml
stringnumberarray
mr
stringnumberarray
mt
stringnumberarray
mb
stringnumberarray

AutocompleteVirtualized props

Name
Type
Default
options
array
components
object
searchIndex
func
indexStrategy
func
sanitizer
func
tokenizer
func
elementRef
object
indexes
array
value
object
onChange
func
isMulti
bool