Glowup
INPUTS · 32 / 89
Autocomplete
Autocomplete — a Material You inputs component for React Native and web.
󱀫
packages/ui/src/components/Autocomplete.tsx
Live demo
Country
Properties
8 controls
Label
Placeholder
Min Chars
Loading
Empty Message
Helper Text
Error Message
Disabled
Usage
Autocomplete.tsx
<Autocomplete label="Country" />
Variants
The states and shapes this component is meant to be used in.
Suggestions
The list opens on focus and filters as you type; selecting a suggestion writes its value back into the field.
Focus the field to open the list — free text is allowed, this is not a Select.
Delivery city
󰟙
Matches anywhere in the name, not just the start.
Loading
Delivery city
Waiting on the server.
With error
Delivery city *
󰗖
We do not deliver there yet
Disabled
Delivery city
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
20 on AutocompleteProps
Filter props
󰍉
onChangeText
required
(text: string) => void
onSelect
required
(option: AutocompleteOption) => void
options
required
AutocompleteOption[]
value
required
string
The text in the field. Free text is allowed — this is not a Select.
clearable
boolean
default: true
Adds a clear button once there is text. Defaults to `true`.
clearAccessibilityLabel
string
disabled
boolean
emptyMessage
string
Shown when nothing matches. Omit to hide the list instead.
error
string
filter
(option: AutocompleteOption, query: string) => boolean
default: defaultFilter
Custom matcher. Defaults to a case- and accent-insensitive substring test over `label`. Pass `() => true` when the options are filtered server-side.
helperText
string
Supporting text below the field; hidden while an error is shown.
label
string
leadingIcon
MaterialCommunityIconsGlyphs
loading
boolean
Shows a spinner in the field — for options still being fetched.
maxSuggestions
number
default: 8
Caps the visible suggestions. Defaults to 8.
minChars
number
default: 1
Characters required before suggestions appear. Defaults to 1.
placeholder
string
required
boolean
style
StyleProp<ViewStyle>
testID
string