Version: 3.0.0-next.37

TypeAhead(Autocomplete)

A Typeahead component and hook that helps you in implementing Autocomplete Inputs.

Import#

import { useTypeahead, Typeahead } from 'native-base';

Examples#

Typeahead Component#

Typeahead Component with RenderItem#

useTypeahead Hook#

Props#

Typeahead Component#

NameTypeDescriptionDefault
optionsArrayArray of items that you need to search for autocomplete.-
getOptionLabelfunctionUsed to determine the string value for a given option. It's used to fill the input.-
getOptionKeystringUsed to determine the key value for a given option.-
disabledKeysstring[]Array of disabled keys. Used to determine disabled options. A key can be specified using getOptionKey.-
renderItemfunctionexpects a callback function that returns the JSX Element that you want to be rendered in dropdown. It requires a variable which is an Item from data array provided.-
toggleIconfunctionFunction to control the design of Toggle button. It exposes isOpen which is a boolean that tells if the dropdown is open or not.-
dropdownHeightnumber, stringheight of the Typeahead dropdown200px
numberOfItemsnumberTotal number of items to be shown at a time in the dropdown.-
inputValuestringTo set Typeahead's value. Mainly used in controlled input situations.-
onSelectedItemChangefunctionCallback function that gets called when selected Item changes in Typeahead.-
onChangefunctionCallback function that gets called when input value changes in Typeahead.-
labelstringUsed to specify label of the TypeAhead.-

Accessibility#

Uses React Native ARIA @react-native-aria/combobox which follows the Checkbox WAI-ARIA design pattern.

useTypeahead Hook#

NameTypeDescriptionDefault
isOpenbooleantells if the dropdown is open or not.-
itemsArrayArray of items that you need to search for autocomplete.-
itemToStringfunction-
selectedItemany-
onInputValueChangefunction-
onSelectedItemChangefunction-