Version: 3.1.0

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>
)
}
Read more about extending component theme here.

Accessibility#

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