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	ResponsiveValue<"contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | ... 232 more ... | (string & {})>	The Selected Item text color.	-
placeholderTextColor	ResponsiveValue<"contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | ... 232 more ... | (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	"outline" | "rounded" | "filled" | "underlined" | "unstyled"	Variant of the Select	outline
_actionSheetContent	IActionsheetContentProps	props to be passed to underlying ActionSheet.Content. Select uses ActionSheet underneath.	-
wrapperRef	MutableRefObject<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>

)

}

Read more about extending component theme here.

Accessibility

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