---
name: Select
route: /components/select
menu: Components
---

import { Playground, Props, Link } from 'docz'
import Select from './Select'

# Select

Component for selecting values from a larger number of options.

<Playground>
  <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>
</Playground>

## 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

- <Link to="../checkbox">Checkbox</Link> for a similar component on selecting values among very few choices.
- <Link to="../radiobutton">RadioButton</Link> for a similar component on selecting a single value among very few choices.