Select | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Select
Select creates a dropdown list of items with the selected item in closed view.
Import
Copy
import { Select } from "native-base";
Examples
Basic
Playground
FormControlled
Playground
Select
Props
placeholder
The placeholder that describes the Select.
Type: string
color
The Selected Item text color.
Type: string
placeholderTextColor
The placeholder text color
Type: string
_item
Item props passed here will be passed to each Select.Item component.
_selectedItem
Item props passed here will be passed to the selected Select.Item component.
selectedValue
Currently selected value. Useful for controlling the Select state
Type: string
defaultValue
Default selected value.
Type: string
onValueChange
Callback to be invoked when Select value is changed
Type: (itemValue: string) => void
isDisabled
Whether Select is disabled
Type: boolean
dropdownIcon
If given, updates the dropdown Icon
Type: Element
dropdownOpenIcon
If given, updates the dropdown Icon when opened
Type: Element
dropdownCloseIcon
If given, updates the dropdown Icon when closed
Type: Element
variant
Variant of the Select
Type: "rounded" | "outline" | "filled" | "underlined" | "unstyled"
Default: outline
_actionSheetContent
props to be passed to underlying ActionSheet.Content. Select uses ActionSheet underneath.
wrapperRef
Ref to be attached to the Select wrapper
Type: any
Select.Item
Props
label
The label which will be displayed.
Type: string
value
The value to be used for the item. This is the value that will be returned on form submission.
Type: string
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the select.
Info: We can easily extend the select component theme using extendTheme function as described in the documentation .
Accessibility
use native variant. Accessibility improvements on styled variant is in-progress.
Nativebase logo
MadeWithNativeBase