---
title: Select
category: Forms
summary: Provide a list of options that can be selected. Replaces native select menus by using aria roles to enhance accessibility while allowing full customization of the options and what is used in the select popover. Composes [InputBox](/inputbox) and [Popover](/popover).
---

```jsx live
render(
  <Select
    emptyValue="Select a fruit"
    tooltip={{ title: 'Select a fruit' }}
    onChange={(e) => console.log(e)}
  >
    <Select.Option value="apple">Apple</Select.Option>
    <Select.Option value="orange">Orange</Select.Option>
    <Select.Option value="banana">Banana</Select.Option>
    <Select.Option value="mango">Mango</Select.Option>
    <Select.Option value="kiwi" disabled>
      Kiwi (Out of stock)
    </Select.Option>
    <Select.Option value="strawberry">Strawberry</Select.Option>
    <Divider margin={0.5} />
    <Menu.Item distribution="fill" spacing={1}>
      <Button title="Action 1" size="sm" />
      <Button title="Action 2" size="sm" />
    </Menu.Item>
  </Select>
)
```

```jsx live
const options = [
  {
    label: 'Dogs',
    optgroup: [
      { value: 'frenchy', label: 'French Bulldog' },
      { value: 'pit-bull', label: 'Pit Bull' },
    ],
  },
  {
    label: 'Cats',
    optgroup: [
      { value: 'munchkin', label: 'Munchkin' },
      { value: 'persian', label: 'Persian' },
    ],
  },
]
render(() => {
  const ref = React.useRef(null)
  const [selectedValues, setSelectedValues] = React.useState([])
  return (
    <StackView
      innerRef={ref}
      as="form"
      id="container"
      position="relative"
      alignment="center"
      spacing={1}
    >
      <Select
        name="pets"
        multiple
        options={options}
        value={selectedValues}
        matchWidths={false}
        emptyValue="Choose your favorite pets"
        renderTo="#container"
        onChange={(event) => setSelectedValues(event.value)}
      />
      <Button
        title="Submit"
        size="xs"
        theme="primary"
        onClick={() => ref.current.submit()}
      />
    </StackView>
  )
})
```

```jsx live
const options = [
  {
    title: 'Arrangement Files',
    options: [
      {
        label: 'Chord Chart + → Lyrics & Chords',
        type: 'TXT',
      },
      {
        label: 'Lead Sheet',
        type: 'PDF',
      },
    ],
  },
  {
    title: 'E (Most Common)',
    options: [
      {
        label: 'E Chord Chart +',
        type: 'PDF',
      },
    ],
  },
  {
    title: 'Ab',
    options: [
      {
        label: 'Ab Chord Chart +',
        type: 'PDF',
      },
    ],
  },
]
render(
  <Select
    multiple
    renderValue={(selectedOptions) => (
      <Select.Value>
        {selectedOptions.map((option) => option.value).join(', ')}
      </Select.Value>
    )}
  >
    {options.map((optgroup) => (
      <Select.OptionGroup key={optgroup.title} title={optgroup.title}>
        {optgroup.options.map((option) => (
          <Select.Option key={option.label} value={option.label}>
            <Text marginRight={2}>{option.label}</Text>
            <Badge size="xs" marginLeft="auto">
              {option.type}
            </Badge>
          </Select.Option>
        ))}
      </Select.OptionGroup>
    ))}
  </Select>
)
```

```jsx live
render(
  <Box>
    <Select multiple>
      <Select.OptionGroup title="Group 1">
        <Select.Option value="1">One</Select.Option>
        <Select.Option value="2">Two</Select.Option>
        <Select.Option value="3">Three</Select.Option>
      </Select.OptionGroup>
      <Select.OptionGroup title="Group 2">
        <Select.Option value="4">Four</Select.Option>
        <Select.Option value="5">Five</Select.Option>
        <Select.Option value="6">Six</Select.Option>
      </Select.OptionGroup>
    </Select>
  </Box>
)
```

```jsx live
render(
  <Box padding={2} backgroundColor="primary">
    <Select.Inline light>
      {generateRange(100).map((number) => (
        <Select.Option key={number} value={number}>
          {number}
        </Select.Option>
      ))}
    </Select.Inline>
    <Input.Inline
      size="xl"
      fontSize={0}
      light
      defaultValue="Editable Heading"
    />
  </Box>
)
```