@ds-kit/autocomplete

title: "Autocomplete" slug: "/packages/autocomplete" category: "control" componentNames:

• "Autocomplete"
• "AutocompleteVirtualized"

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.

<>
  <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"

<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.

<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

<>
  <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.

<>
  <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.

<>
  <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"
  />
</>