BalanceReckon Design System
Forms

Autocomplete

Presents a filtered list of options once the user has provided input, for datasets too large to browse.

import { Autocomplete, AutocompleteField, entityDetailOptionRenderer, entityOptionRenderer, userOptionRenderer } from '@balance-web/autocomplete';
Loading demo…

Usage

The Autocomplete has no opinions about what you do when an option is selected.

Loading demo…

disabled

Disables the autocomplete.

Loading demo…

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.

Loading demo…

AutocompleteField

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

Loading demo…

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

Loading demo…

Entities

Loading demo…

Entity Details

Loading demo…
Loading demo…

On this page