Select

.select styles HTML <select> elements.

Applicable Elements

• select

Basic Usage

States

<select class="select error">
  <option value="akami">Akami</option>
  <option value="salmon">Salmon</option>
</select>

<select class="select" disabled>
  <option value="akami">Akami</option>
  <option value="salmon">Salmon</option>
</select>

React component Advanced

<Select/> renders a single <select class="select" /> element.

It inherits the error property from a Fieldset component and automatically applies the error style.

Q&A

How can I customize option styles?

Customizing option styles is not supported by CSS.
It is recommended to use native option pickers for accessibility.

How do I customize the outline shown on focus?

You can set the outline property in CSS.
However, we recommend keeping the default outline for accessibility.