Select | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Typography

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

Select

Select creates a dropdown list of items with the selected item in closed view.

Import

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

Examples

Basic


Playground
const Example = () => {
  let [language, setLanguage] = React.useState("");
  return <VStack alignItems="center" space={4}>
      <Select selectedValue={language} minWidth={200} accessibilityLabel="Select your favorite programming language" placeholder="Select your favorite programming language" onValueChange={itemValue => setLanguage(itemValue)} _selectedItem={{
      bg: "cyan.600",
      endIcon: <CheckIcon size={4} />
    }}>
        <Select.Item label="JavaScript" value="js" />
        <Select.Item label="TypeScript" value="ts" />
        <Select.Item label="C" value="c" />
        <Select.Item label="Python" value="py" />
        <Select.Item label="Java" value="java" />
      </Select>
    </VStack>;
};const Example = () => {
  let [language, setLanguage] = React.useState("");
  return <VStack alignItems="center" space={4}>
      <Select selectedValue={language} minWidth={200} accessibilityLabel="Select your favorite programming language" placeholder="Select your favorite programming language" onValueChange={itemValue => setLanguage(itemValue)} _selectedItem={{
      bg: "cyan.600",
      endIcon: <CheckIcon size={4} />
    }}>
        <Select.Item label="JavaScript" value="js" />
        <Select.Item label="TypeScript" value="ts" />
        <Select.Item label="C" value="c" />
        <Select.Item label="Python" value="py" />
        <Select.Item label="Java" value="java" />
      </Select>
    </VStack>;
};

FormControlled


Playground
const Example = () => {
  const [value, setValue] = React.useState("js");
  return <Container>
      <FormControl isRequired isInvalid>
        <FormControl.Label>Select Item</FormControl.Label>
        <Select selectedValue={value} minWidth={200} accessibilityLabel="Select your favorite programming language" placeholder="Select your favorite programming language" onValueChange={itemValue => {
        setValue(itemValue);
      }} _selectedItem={{
        bg: "teal.600",
        endIcon: <CheckIcon size={5} />
      }} mt={1}>
          <Select.Item label="JavaScript" value="js" />
          <Select.Item label="TypeScript" value="ts" />
          <Select.Item label="C" value="c" />
          <Select.Item label="Python" value="py" />
          <Select.Item label="Java" value="java" />
        </Select>
        <FormControl.HelperText mt={1}>
          We'll keep this between us.
        </FormControl.HelperText>
        <FormControl.ErrorMessage>Something is wrong.</FormControl.ErrorMessage>
      </FormControl>

      <HStack mt={3} alignItems="baseline">
        <Text fontSize="md">Selected Values: </Text>
        <Text fontSize="md" bold>
          {value}
        </Text>
      </HStack>
    </Container>;
};const Example = () => {
  const [value, setValue] = React.useState("js");
  return <Container>
      <FormControl isRequired isInvalid>
        <FormControl.Label>Select Item</FormControl.Label>
        <Select selectedValue={value} minWidth={200} accessibilityLabel="Select your favorite programming language" placeholder="Select your favorite programming language" onValueChange={itemValue => {
        setValue(itemValue);
      }} _selectedItem={{
        bg: "teal.600",
        endIcon: <CheckIcon size={5} />
      }} mt={1}>
          <Select.Item label="JavaScript" value="js" />
          <Select.Item label="TypeScript" value="ts" />
          <Select.Item label="C" value="c" />
          <Select.Item label="Python" value="py" />
          <Select.Item label="Java" value="java" />
        </Select>
        <FormControl.HelperText mt={1}>
          We'll keep this between us.
        </FormControl.HelperText>
        <FormControl.ErrorMessage>Something is wrong.</FormControl.ErrorMessage>
      </FormControl>

      <HStack mt={3} alignItems="baseline">
        <Text fontSize="md">Selected Values: </Text>
        <Text fontSize="md" bold>
          {value}
        </Text>
      </HStack>
    </Container>;
};