Select

Display a dropdown list of items.

Default

Code Editor

<Container left>
  <Container>
    <Select>
      <option>First Option</option>
      <option>Second Option</option>
    </Select>
  </Container>

  <Container>
    <Select small width="150px">
      <option>First Option</option>
      <option>Second Option</option>
    </Select>
  </Container>
</Container>

<Container left>
  <Container>
    <Select>
      <option>First Option</option>
      <option>Second Option</option>
    </Select>
  </Container>
  <Container>
    <Select small width="150px">
      <option>First Option</option>
      <option>Second Option</option>
    </Select>
  </Container>
</Container>

Disabled

Code Editor

<Select disabled>
  <option>First Option</option>
  <option>Second Option</option>
</Select>

<Select disabled>
  <option>First Option</option>
  <option>Second Option</option>
</Select>

Custom Icon

Code Editor

<Select icon={<ArrowDown width="12px" />}>
  <option>First Option</option>
  <option>Second Option</option>
</Select>

<Select icon={<ArrowDown width="12px" />}>
  <option>First Option</option>
  <option>Second Option</option>
</Select>

No Icon

Code Editor

<Select icon={false}>
  <option>First Option</option>
  <option>Second Option</option>
</Select>

<Select icon={false}>
  <option>First Option</option>
  <option>Second Option</option>
</Select>