inputs

Autocomplete

Decorate inputs with other elements to create a single field

Features

Keyboard accessible
Composable and full control over options
Themes ready

Links

Open in playground Open in Storybook View source

Anatomy

import { Autocomplete } from "@wonderflow/react-components";

export default () => {
  return (
    <Autocomplete>
      <Autocomplete.Option value="1">Option 1</Autocomplete.Option>
      <Autocomplete.Option value="2">Option 2</Autocomplete.Option>
      <Autocomplete.Option value="3">Option 3</Autocomplete.Option>
    </Autocomplete>
  );
};

tsx

API Reference

Autocomplete

This component extends all the properties from Textfield and adds the following ones:

PROPERTY

TYPE

DEFAULT

onChange

function

maxHeight

string

200px

emptyContent

ReactNode

No results found

busy

boolean

false

Autocomplete.Option

This component extends all the properties from Menu.Item and adds the following ones:

PROPERTY

TYPE

DEFAULT

value*

string

onClick

function

children*

enum

Accessibility

Keyboard interactions

Name	Description
`tab`	If the field is focused, move the focus on the listbox, otherwise move the focus on the field.
`arrowDown`	Inside the listbox, moves focus on the next element
`arrowUp`	Inside the listbox, moves focus on the previous element
`Enter`	Pick the option selected in the listbox.