Select | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
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.
Show Code
Playground
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" | "muted.50" | "muted.800" | "text.500" | "text.400" | "muted.500" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "text.50" | "text.600" | "muted.700" | ... 342 more ... | "tertiary.900">
placeholderTextColor
The placeholder text color
Type: ResponsiveValue<"gray.300" | "muted.50" | "muted.800" | "text.500" | "text.400" | "muted.500" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "text.50" | "text.600" | "muted.700" | ... 342 more ... | "tertiary.900">
_item
Item props passed here will be passed to each Select.Item component.
Type: Partial<IButtonProps>
_selectedItem
Item props passed here will be passed to the selected Select.Item component.
Type: Partial<IButtonProps>
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
isHovered
Whether Select is hovered
Type: boolean
isFocused
Whether Select is focused
Type: boolean
isFocusVisible
If true, the focus ring of select will be visible.
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" | "unstyled" | "rounded" | "filled" | "underlined"
Default: outline
onOpen
Callback to be invoked when Select Dropdown or BottomSheet is opened.
Type: (nativeEvent: any) => void
onClose
Callback to be invoked when Select Dropdown or BottomSheet is closed.
Type: (nativeEvent: any) => void
_actionSheet
props to be passed to underlying ActionSheet. Select uses ActionSheet underneath.
Type: Partial<IActionsheetProps>
_actionSheetContent
props to be passed to underlying ActionSheet.Content. Select uses ActionSheet underneath.
Type: Partial<IActionsheetContentProps>
_actionSheetBody
props to be passed to underlying Flatlist in ActionSheet.Content.
Type: Partial<IFlatListProps<any>>
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