Version: 3.0.0-next.38

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. -
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

Accessibility#

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