react-common/packages/react-common-docs/src/pages/components/Select.mdx

---
name: Select
---

import { Select } from '../../../../react-common/src'
import Playground from '../../components/Playground/Playground'
import Props from '../../components/Props/Props'
import Header from '../../components/Header/Header'

<Header of="Select" />

<Playground
  components={{ Select }}
  code={`
    <Select>
      <optgroup
        label="Fruits"
      >
        <option value="mango">Mango</option>
        <option value="strawberry">Strawberry</option>
        <option value="blueberry">Blueberry</option>
      </optgroup>
      <optgroup
        label="Classic"
      >
        <option value="chocolate">Chocolate</option>
        <option value="vanilla">Vanilla</option>
      </optgroup>
    </Select>
  `}
/>

## Props

<Props of="Select" />

## Usage Notes

The component will behave as `block`, i.e. it takes the remaining of the horizontal space.
To use the component together with layouts, see [TextInput](./TextInput) for examples. Both `Select` and
`TextInput` have similar strategies on usage with layouts.

## See Also

- [Checkbox](./Checkbox) for a similar component on selecting values among very few choices.
- [RadioButton](./RadioButton) for a similar component on selecting a single value among very few choices.