Autocomplete

The Autocomplete component is a more complex variant of a text input.

This component allows a user to select a value from a list of options by suggesting options based on what text the user types into an input field.

Technically, this is a wrapper around Dropdown together with Options proving autocomplete functionality & exposing it via a generic autocomplete component and lower-level hooks.

() => {
    const [value, setValue] = useState('');

    const options = [
        { value: 'henlo', label: 'Henló' },
        { value: 'schmenlo', label: 'Schmenlo' },
        { value: 'benlo', label: 'Benlo' },
        { value: 'frenlo', label: 'Frenlo' },
        { value: 'menlo', label: 'Ménlo' },
    ];

    return (
        <Autocomplete
            id="autocomplete"
            value={value}
            onChange={setValue}
            onSelect={({ label }) => setValue(label)}
            placeholder="Example"
            options={options}
            getData={({ label }) => label}
        />
    );
}

Simple

There is a convenience variant of the Autocomplete called SimpleAutocomplete which wraps the Autocomplete component, providing it with a sensible default configuration, mainly assuming that the options array input will consist of strings only.

Hooks API

The Autocomplete component tries to achieve flexibility for different types of input collection & rendering use-cases with lower-level hooks.

The hook api returns props to spread on the input and option elements.

Accessibility

Since this is a component where focus persists inside the anchor even while keyboard navigating through the elements inside its dropdown, accessibility can't be managed via native focus and has to be artifically created via aria attributes. It is for that reason that the id prop, which is used internally to link the dropdown contents to it's anchor, is required.

Props