Balance Logo
Balance
Reckon Design System

Autocomplete

Autocompletes allow users to search through a set of options fetched over the network based on their input
Install
pnpm add @reckon-web/autocomplete
Import usage
import {
Autocomplete,
AutocompleteField,
entityDetailOptionRenderer,
entityOptionRenderer,
userOptionRenderer
} from '@reckon-web/autocomplete';
  • Code
  • API

Basic

Search...
Open in Playroom

Selecting options

You may want to show the option that the user selected when they are inside a form. You can use value to do this.

Search...

AutocompleteField

If you're using the Autocomplete inside a form, you should use the AutocompleteField component. This accepts similar props to other Field components.

Provide instructions that may aid user input
Search...
Invalid message reserved for required fields

Option renderers

You can provide a render function to renderOption to render options in a different way. Three default render functions are exported for various use cases.

Users

Search...

Entities

Search...

Entity Details

Search...
Search...
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.