Skip to content
Vy logo
  • Spor
  • Resources
Components

Autocomplete (New Combobox)

A Autocomplete is a dropdown list you can search in and filter.


This replaces Combobox which which will deprecated eventually.

GitHub

Code examples

Map out a list of items. Pass item to each AutocompleteItem.

() => {
  const countries = [
    { value: "no", label: "Norge" },
    { value: "se", label: "Sverige" },
    { value: "dk", label: "Danmark" },
    { value: "fi", label: "Finland" },
    { value: "de", label: "Tyskland" },
    { value: "fr", label: "Frankrike" },
    { value: "nl", label: "Nederland" },
  ];

  return (
    <Autocomplete label="Velg land">
      {countries.map((item) => (
        <AutocompleteItem item={item} key={item.value}>{item.label}</AutocompleteItem>
      ))}
    </Autocomplete>
  );
};

Guidelines

An autocomplete is a useful tool when you need to choose from a long list of options. It allows users to search within the list, making it easier and faster to navigate using the keyboard rather than scrolling through potentially many items.

If there are fewer options or filtering isn’t necessary, you might want to use the Select or NativeSelect components instead.

Each item in a autocomplete dropdown can be styled however you like — but try to keep them simple and easy to scan, so users experience the list as clear and organized.

Code

<Autocomplete />

import { Autocomplete } from "@vygruppen/spor-react";

See chakra docsEkstern lenke for more props and examples.

Props

Name
Type
Required?
Description
childrenReact.ReactNodeAutocompleteIeItems, AutocompleteItemGroups.
labelstring
variant"core" | "floating"
filteredExternallybooleanWether to opt out of the internal filtering. Useful for async data or if you want full control. Defaults to false
openOnClickbooleandefaults to true
openOnFocusbooleandefaults to true
emptyLabelReact.ReactNodeCustom label to show when no results are found
loadingbooleanWether to show loading state inside dropdown. Useful for async data
multiplebooleanWhether to allow multiple selection
leftIconReact.ReactNodefilteredExternally
invalidboolean
errorTextstring
disabledboolean
inputValuestring
defaultInputValuestring
onInputValueChange(details: InputValueChangeDetails) => void
valuestring[]
defaultValuestring[]
onValueChange(details: ValueChangeDetails<T>) => voidFunction called when a new item is selected

<AutocompleteItem />

import { AutocompleteItem } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
childrenReact.ReactNode

<AutocompleteItemGroup />

import { AutocompleteItemGroup } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
childrenReact.ReactNode

<AutocompleteItemGroupLabel />

import { AutocompleteItemGroupLabel } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
childrenReact.ReactNode