---
name: Dropdown
menu: Patterns
parent: Modules
route: /patterns/dropdown
---

# Dropdown

Dropdown allows users to select one option from a list.

```specimen-react
<Dropdown id="dropdown" label="Cheese Picker" status="unknown" onChange={(e) => console.log(e.target.value)}>
  <option disabled value="">Please select an option</option>
  <option>Cheddar</option>
  <option>Camembert</option>
  <option>Parmesan</option>
  <option>Manchego</option>
  <option>Double Gloucester</option>
  <option>Spuriously long string in order to provide testing facilities, regarding truncation of such a spuriously long string.</option>
</Dropdown>
```

With optional field

```specimen-react
<Dropdown id="dropdown" label="Cheese Picker" status="unknown" onChange={(e) => console.log(e.target.value)}>
  <option value="">Please select an option</option>
  <option>Cheddar</option>
  <option>Camembert</option>
  <option>Parmesan</option>
  <option>Manchego</option>
  <option>Double Gloucester</option>
  <option>Spuriously long string in order to provide testing facilities, regarding truncation of such a spuriously long string.</option>
</Dropdown>
```

## With negative validation

```specimen-react
<Dropdown id="dropdown" label="Cheese Picker" status="invalid" defaultValue="parmesan" errorMessage='Incorrect cheese selelected' onChange={(e) => console.log(e.target.value)}>
  <option disabled value="">Please select an option</option>
  <option>Camembert</option>
  <option value="parmesan">Parmesan</option>
  <option>Manchego</option>
  <option>Double Gloucester</option>
  <option>Spuriously long string in order to provide testing facilities, regarding truncation of such a spuriously long string.</option>
</Dropdown>
```

Use Dropdown when there’re too many options to display them as radio buttons or when it’s beneficial to be able to return to a default value.
