Skip to main content
‌
‌

Autocomplete

Decorate inputs with other elements to create a single field

Beta
Quick nav

Features

  • Keyboard accessible
  • Composable and full control over options
  • Themes ready

Links

View source Report an issue

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

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.