Select

The Select component is used for collecting user provided information from a list of options.

Import

copy
import {
  Select,
  Option,
  OptionGroup,
} from '@trendmicro/react-styled-ui';
import {
  Select,
  Option,
  OptionGroup,
} from '@trendmicro/react-styled-ui';

Usage

EDITABLE EXAMPLE
copy
<>
  <TextLabel mb="1x">Label:</TextLabel>
  <Select>
    <Option value="">Choose an option</Option>
    <OptionGroup label="Category 1">
      <Option value={1}>Option 1</Option>
      <Option value={2}>Option 2</Option>
    </OptionGroup>
    <OptionGroup label="Category 2">
      <Option value={3}>Option 3</Option>
      <Option value={4}>Option 4</Option>
    </OptionGroup>
  </Select>
</>
<>
  <TextLabel mb="1x">Label:</TextLabel>
  <Select>
    <Option value="">Choose an option</Option>
    <OptionGroup label="Category 1">
      <Option value={1}>Option 1</Option>
      <Option value={2}>Option 2</Option>
    </OptionGroup>
    <OptionGroup label="Category 2">
      <Option value={3}>Option 3</Option>
      <Option value={4}>Option 4</Option>
    </OptionGroup>
  </Select>
</>

Variants

The Select component comes in 3 variants: outline, filled, and unstyled. Pass the variant prop and set it to either of these values.

outline

EDITABLE EXAMPLE
copy
<Select variant="outline">
  <Option value="">Choose an option</Option>
  <Option value="outline">Outline</Option>
</Select>
<Select variant="outline">
  <Option value="">Choose an option</Option>
  <Option value="outline">Outline</Option>
</Select>

filled

EDITABLE EXAMPLE
copy
<Select variant="filled">
  <Option value="">Choose an option</Option>
  <Option value="filled">Filled</Option>
</Select>
<Select variant="filled">
  <Option value="">Choose an option</Option>
  <Option value="filled">Filled</Option>
</Select>

unstyled

EDITABLE EXAMPLE
copy
<Select variant="unstyled">
  <Option value="">Choose an option</Option>
  <Option value="unstyled">Unstyled</Option>
</Select>
<Select variant="unstyled">
  <Option value="">Choose an option</Option>
  <Option value="unstyled">Unstyled</Option>
</Select>

Attributes

The <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once. It also accepts most of the general form input attributes such as disabled, required, etc.

Multiple options

EDITABLE EXAMPLE
copy
const FlexOption = ({ style, ...props }) => (
  <Flex
    as="option"
    align="center"
    height="8x"
    px="3x"
    {...props}
  />
);

function Example() {
  return (
    <Select multiple size="4">
      <FlexOption value={1}>Option 1</FlexOption>
      <FlexOption value={2}>Option 2</FlexOption>
      <FlexOption value={3}>Option 3</FlexOption>
      <FlexOption value={4}>Option 4</FlexOption>
      <FlexOption value={5}>Option 5</FlexOption>
      <FlexOption value={6}>Option 6</FlexOption>
    </Select>
  );
}

render(<Example />);
const FlexOption = ({ style, ...props }) => (
  <Flex
    as="option"
    align="center"
    height="8x"
    px="3x"
    {...props}
  />
);

function Example() {
  return (
    <Select multiple size="4">
      <FlexOption value={1}>Option 1</FlexOption>
      <FlexOption value={2}>Option 2</FlexOption>
      <FlexOption value={3}>Option 3</FlexOption>
      <FlexOption value={4}>Option 4</FlexOption>
      <FlexOption value={5}>Option 5</FlexOption>
      <FlexOption value={6}>Option 6</FlexOption>
    </Select>
  );
}

render(<Example />);

disabled

EDITABLE EXAMPLE
copy
<Select disabled>
  <Option value="">Choose an option</Option>
</Select>
<Select disabled>
  <Option value="">Choose an option</Option>
</Select>

required

EDITABLE EXAMPLE
copy
<Select required>
  <Option value="">Choose an option</Option>
  <Option value="dog">Dog</Option>
  <Option value="cat">Cat</Option>
</Select>
<Select required>
  <Option value="">Choose an option</Option>
  <Option value="dog">Dog</Option>
  <Option value="cat">Cat</Option>
</Select>

Props

Select

Option / OptionGroup