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"
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" /> </>
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" />
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>
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" /> </>
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" /> </>
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" /> </>
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
string
number
array
"100%"
m
string
number
array
mx
string
number
array
my
string
number
array
ml
string
number
array
mr
string
number
array
mt
string
number
array
mb
string
number
array
options
array
components
object
searchIndex
func
indexStrategy
func
sanitizer
func
tokenizer
func
elementRef
object
indexes
array
value
object
onChange
func
isMulti
bool