Select | NativeBase


Show Code
Playground
const Example = () => {
  let [service, setService] = React.useState("");
  return <VStack alignItems="center" space={4}>
      <Select shadow={2} selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{
      bg: "teal.600",
      endIcon: <CheckIcon size="5" />
    }} _light={{
      bg: "coolGray.100",
      _hover: {
        bg: "coolGray.200"
      },
      _focus: {
        bg: "coolGray.200:alpha.70"
      }
    }} _dark={{
      bg: "coolGray.800",
      _hover: {
        bg: "coolGray.900"
      },
      _focus: {
        bg: "coolGray.900:alpha.70"
      }
    }} onValueChange={itemValue => setService(itemValue)}>
        <Select.Item shadow={2} label="UX Research" value="ux" />
        <Select.Item shadow={2} label="Web Development" value="web" />
        <Select.Item shadow={2} label="Cross Platform Development" value="cross" />
        <Select.Item shadow={2} label="UI Designing" value="ui" />
        <Select.Item shadow={2} label="Backend Development" value="backend" />
      </Select>
    </VStack>;
};const Example = () => {
  let [service, setService] = React.useState("");
  return <VStack alignItems="center" space={4}>
      <Select shadow={2} selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{
      bg: "teal.600",
      endIcon: <CheckIcon size="5" />
    }} _light={{
      bg: "coolGray.100",
      _hover: {
        bg: "coolGray.200"
      },
      _focus: {
        bg: "coolGray.200:alpha.70"
      }
    }} _dark={{
      bg: "coolGray.800",
      _hover: {
        bg: "coolGray.900"
      },
      _focus: {
        bg: "coolGray.900:alpha.70"
      }
    }} onValueChange={itemValue => setService(itemValue)}>
        <Select.Item shadow={2} label="UX Research" value="ux" />
        <Select.Item shadow={2} label="Web Development" value="web" />
        <Select.Item shadow={2} label="Cross Platform Development" value="cross" />
        <Select.Item shadow={2} label="UI Designing" value="ui" />
        <Select.Item shadow={2} label="Backend Development" value="backend" />
      </Select>
    </VStack>;
};

Import

Copy
import { Select } from "native-base";

Examples

Basic


Playground
const Example = () => {
  const [service, setService] = React.useState("");
  return <Center>
      <Box maxW="300">
        <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{
        bg: "teal.600",
        endIcon: <CheckIcon size="5" />
      }} mt={1} onValueChange={itemValue => setService(itemValue)}>
          <Select.Item label="UX Research" value="ux" />
          <Select.Item label="Web Development" value="web" />
          <Select.Item label="Cross Platform Development" value="cross" />
          <Select.Item label="UI Designing" value="ui" />
          <Select.Item label="Backend Development" value="backend" />
        </Select>
      </Box>
    </Center>;
};const Example = () => {
  const [service, setService] = React.useState("");
  return <Center>
      <Box maxW="300">
        <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{
        bg: "teal.600",
        endIcon: <CheckIcon size="5" />
      }} mt={1} onValueChange={itemValue => setService(itemValue)}>
          <Select.Item label="UX Research" value="ux" />
          <Select.Item label="Web Development" value="web" />
          <Select.Item label="Cross Platform Development" value="cross" />
          <Select.Item label="UI Designing" value="ui" />
          <Select.Item label="Backend Development" value="backend" />
        </Select>
      </Box>
    </Center>;
};

FormControlled


Playground
const Example = () => {
  return <Center>
      <FormControl w="3/4" maxW="300" isRequired isInvalid>
        <FormControl.Label>Choose service</FormControl.Label>
        <Select minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{
        bg: "teal.600",
        endIcon: <CheckIcon size={5} />
      }} mt="1">
          <Select.Item label="UX Research" value="ux" />
          <Select.Item label="Web Development" value="web" />
          <Select.Item label="Cross Platform Development" value="cross" />
          <Select.Item label="UI Designing" value="ui" />
          <Select.Item label="Backend Development" value="backend" />
        </Select>
        <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
          Please make a selection!
        </FormControl.ErrorMessage>
      </FormControl>
    </Center>;
};const Example = () => {
  return <Center>
      <FormControl w="3/4" maxW="300" isRequired isInvalid>
        <FormControl.Label>Choose service</FormControl.Label>
        <Select minWidth="200" accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{
        bg: "teal.600",
        endIcon: <CheckIcon size={5} />
      }} mt="1">
          <Select.Item label="UX Research" value="ux" />
          <Select.Item label="Web Development" value="web" />
          <Select.Item label="Cross Platform Development" value="cross" />
          <Select.Item label="UI Designing" value="ui" />
          <Select.Item label="Backend Development" value="backend" />
        </Select>
        <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
          Please make a selection!
        </FormControl.ErrorMessage>
      </FormControl>
    </Center>;
};

Select

Props

Select implements

placeholder

The placeholder that describes the Select.

Type: string

color

The Selected Item text color.

Type: ResponsiveValue<"gray.300" | "muted.50" | "muted.800" | "text.500" | "text.400" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "muted.500" | "text.50" | "text.600" | "muted.700" | ... 342 more ... | (string & {})>

placeholderTextColor

The placeholder text color

_item

Item props passed here will be passed to each Select.Item component.

Type: Partial<IButtonProps>

_selectedItem

Item props passed here will be passed to the selected Select.Item component.

Type: Partial<IButtonProps>

selectedValue

Currently selected value. Useful for controlling the Select state

Type: string

defaultValue

Default selected value.

Type: string

onValueChange

Callback to be invoked when Select value is changed

Type: (itemValue: string) => void

isDisabled

Whether Select is disabled

Type: boolean

isHovered

Whether Select is hovered

Type: boolean

isFocused

Whether Select is focused

Type: boolean

isFocusVisible

If true, the focus ring of select will be visible.

Type: boolean

dropdownIcon

If given, updates the dropdown Icon

Type: Element

dropdownOpenIcon

If given, updates the dropdown Icon when opened

Type: Element

dropdownCloseIcon

If given, updates the dropdown Icon when closed

Type: Element

variant

Variant of the Select

Type: "outline" | "unstyled" | "rounded" | "filled" | "underlined"

Default: outline

onOpen

Callback to be invoked when Select Dropdown or BottomSheet is opened.

Type: (nativeEvent: any) => void

onClose

Callback to be invoked when Select Dropdown or BottomSheet is closed.

Type: (nativeEvent: any) => void

_actionSheet

props to be passed to underlying ActionSheet. Select uses ActionSheet underneath.

Type: Partial<IActionsheetProps>

_actionSheetContent

props to be passed to underlying ActionSheet.Content. Select uses ActionSheet underneath.

Type: Partial<IActionsheetContentProps>

_actionSheetBody

props to be passed to underlying Flatlist in ActionSheet.Content.

Type: Partial<InterfaceFlatListProps<any>>

wrapperRef

Ref to be attached to the Select wrapper

Type: MutableRefObject<any>

Select.Item

Props

SelectItem implements

label

The label which will be displayed.

Type: string

value

The value to be used for the item. This is the value that will be returned on form submission.

Type: string

Styling

NativeBase ships with a default theme for each component. Checkout the default theme of select

here

Info: We can easily extend the select component theme using extendTheme function as described in the documentation

here

Accessibility

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

Quick Nav

Select | NativeBase | Universal Components for React and React Native