Select | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Resources
Data Display
Typography
Disclosure
Media and Icons
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: ResponsiveValue<"gray.300" | "trueGray.400" | "gray.500" | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "coolGray.50" | "coolGray.100" | "coolGray.200" | "coolGray.300" | ... 233 more ... | (string & {})>
placeholderTextColor
The placeholder text color
Type: ResponsiveValue<"gray.300" | "trueGray.400" | "gray.500" | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "coolGray.50" | "coolGray.100" | "coolGray.200" | "coolGray.300" | ... 233 more ... | (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: "outline" | "rounded" | "unstyled" | "filled" | "underlined"
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: MutableRefObject<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