@ds-kit/autocomplete
v4.0.0
Published
Autocomplete component
Downloads
21
Readme
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"
/>
</>