Select | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
Upgrade to gluestack-ui
If you are starting a new project with NativeBase, we recommend using gluestack-ui
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase.
Migrate to gluestack-ui
If you are working on a project with NativeBase, we recommend using @gluestack-ui/themed
NativeBase
3.4.x
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Disclosure
If you are starting a new project, please try gluestack-ui for better performance and new design.
Select
Select creates a dropdown list of items with the selected item in closed view.
Show Codeconst Example = () => {let [service, setService] = React.useState("");return <VStack alignItems="center" space={4}><Select shadow={2} selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{bg: "teal.600",endIcon: <CheckIcon size="5" />}} _light={{bg: "coolGray.100",_hover: {bg: "coolGray.200"},_focus: {bg: "coolGray.200:alpha.70"}}} _dark={{bg: "coolGray.800",_hover: {bg: "coolGray.900"},_focus: {bg: "coolGray.900:alpha.70"}}} onValueChange={itemValue => setService(itemValue)}><Select.Item shadow={2} label="UX Research" value="ux" /><Select.Item shadow={2} label="Web Development" value="web" /><Select.Item shadow={2} label="Cross Platform Development" value="cross" /><Select.Item shadow={2} label="UI Designing" value="ui" /><Select.Item shadow={2} label="Backend Development" value="backend" /></Select></VStack>;};
Import
Copyimport { Select } from "native-base";
Examples
Basic
Playgroundconst Example = () => {const [service, setService] = React.useState("");return <Center><Box maxW="300"><Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{bg: "teal.600",endIcon: <CheckIcon size="5" />}} mt={1} onValueChange={itemValue => setService(itemValue)}><Select.Item label="UX Research" value="ux" /><Select.Item label="Web Development" value="web" /><Select.Item label="Cross Platform Development" value="cross" /><Select.Item label="UI Designing" value="ui" /><Select.Item label="Backend Development" value="backend" /></Select></Box></Center>;};
FormControlled
Playgroundconst Example = () => {return <Center><FormControl w="3/4" maxW="300" isRequired isInvalid><FormControl.Label>Choose service</FormControl.Label><Select minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{bg: "teal.600",endIcon: <CheckIcon size={5} />}} mt="1"><Select.Item label="UX Research" value="ux" /><Select.Item label="Web Development" value="web" /><Select.Item label="Cross Platform Development" value="cross" /><Select.Item label="UI Designing" value="ui" /><Select.Item label="Backend Development" value="backend" /></Select><FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>Please make a selection!</FormControl.ErrorMessage></FormControl></Center>;};
Select
Props
Select implements , , , , , , , ,
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
SelectItem implements , , , , , , , , , ,
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.
MadeWithNativeBase
gluestack-ui