Skip to content
Vy logo
  • Identitet
  • 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.

Each item in an autocomplete dropdown can be styled however you like — but try to keep them simple and easy to scan.

Keep in mind:

  • If there are fewer options or filtering isn’t necessary, you might want to use the Select or NativeSelect components instead.
  • Keep the text in the options short to make it easier to scan for the user

Accessibility

The Autocomplete has role=”combobox”, and uses aria-autocomplete=”list” together with aria-controls=<list-id>. This combination signals that the inputfield generates a popup with a list of options and possible values, and is generally well supported by screen readers.

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