Version: 3.0.7

Select

Select creates a dropdown list of items with the selected item in closed view.

Import#

import { Select } from 'native-base';

Examples#

Basic#

FormControlled#

Select#

Props#

Name	Type	Description	Default
placeholder	string	The placeholder that describes the Select.	-
color	string	The Selected Item text color.	-
placeholderTextColor	string	The placeholder text color	-
_item	IButtonProps	Item props passed here will be passed to each Select.Item component.	-
_selectedItem	IButtonProps	Item props passed here will be passed to the selected Select.Item component.	-
selectedValue	string	Currently selected value. Useful for controlling the Select state	-
defaultValue	string	Default selected value.	-
onValueChange	(itemValue: string) => void	Callback to be invoked when Select value is changed	-
isDisabled	boolean	Whether Select is disabled	-
dropdownIcon	Element	If given, updates the dropdown Icon	-
dropdownOpenIcon	Element	If given, updates the dropdown Icon when opened	-
dropdownCloseIcon	Element	If given, updates the dropdown Icon when closed	-
variant	"rounded" \| "outline" \| "filled" \| "underlined" \| "unstyled"	Variant of the Select	outline
_actionSheetContent	IActionsheetContentProps	props to be passed to underlying ActionSheet.Content. Select uses ActionSheet underneath.	-
wrapperRef	any	Ref to be attached to the Select wrapper	-

Select implements Box

Select.Item#

Props#

Name	Type	Description	Default
label	string	The label which will be displayed.	-
value	string	The value to be used for the item. This is the value that will be returned on form submission.	-

SelectItem implements Button, Pressable

Styling#

NativeBase ships with a default theme for each component.

Checkout the default theme of select

We can easily extend the select component theme using extendTheme function as shown below.

import { extendTheme, NativeBaseProvider } from "native-base";

const theme = extendTheme({
 components: {
 Select: {
 baseStyle: {},
 defaultProps: {},
 variants: {},
 sizes: {},
 }
 } 
});

function MyApp() {
 return (
 <NativeBaseProvider theme={theme}>
 {/* Rest of the app goes here */}
 </NativeBaseProvider>
 )
}

Accessibility#

use native variant. Accessibility improvements on styled variant is in-progress.