Version: 3.0.0-next.36

Select

Select creates a dropdown list of items with the selected item in closed view. You can use native as well as styled one. The native one will have a different look and feel on each platform(Android, iOS and Web). The behaviour and look of styled variant will be same across all platforms.

Implements#

Import#

import { Select } from 'native-base';

Examples#

Basic#

Native#

Styled#

Props#

Select#

NameTypeDescriptionDefault
variantnative, styledThe variant of the select style to use.native
placeholderstringThe placeholder attribute specifies a short hint that describes the expected value of a selected field (only for styled variant).-
_placeholderTextPropsText props to be applied to placeholder (only for styled variant).-
selectedValuestringThe default value which is selected.-
onValueChangefunctionCallback for on change on the input value.-
selectedItemBgstringBackground color for the selected item (only for styled variant).blue.500
_selectedItemTextPropsText prop for selected item (only for styled variant).-
isDisabledbooleanIf true, the button will be disabled (not supported on ios for native variant).-
dropdownIconJSX.ElementIf given, updates the dropdown Icon (only for styled variant).-
dropdownOpenIconJSX.ElementIf given, updates the dropdown Icon when opened (only for styled variant).-
dropdownCloseIconJSX.ElementIf given, updates the dropdown Icon when closed (only for styled variant).-
_iosStylePropsProps which you only want to pass to ios device.-
_androidStylePropsProps which you only want to pass to android device.-
_webStylePropsProps which you only want to pass to web device.-
_itemTextPropsTextProps to be applied to the label (only for styled variant).-
androidMode
Android
dialog, dropdownOn Android, specifies how to display the selection items when the user taps on the picker (only for native variant).dialog
androidIconColor
Android
stringOn Android, specifies color of dropdown triangle. Input value can any color from theme like default.300 (only for native variant).-
androidPrompt
Android
stringOn Android, prompt string for this picker, used on Android in dialog mode as the title of the dialog (only for native variant).-

Select can be styled using pseudo style props like _isInvalid, _isDisabled and _hover.

Select Item#

NameTypeDescriptionDefault
labelstringThe label which will be displayed.-
valuestringThe value to be used for the item. This is the value that will be returned on form submission.-
isDisabledbooleanIf true, the item will be disabled (only for styled variant).-
_labelTextPropsTextProps to be applied to label (only for styled variant).-