Select

In HTML, <select> form element creates a drop-down list.

<select>
  <option value="papaya">Papaya</option>
  <option value="orange">Orange</option>
  <option selected value="coconut">Coconut</option>
</select>

Note that the Coconut option is selected by default, because of the selected attribute. React, instead of using this selected attribute, uses a value attribute on the root select tag. This is more convenient in a controlled component because you only need to update it in one place.

See the Pen OZGvRX by Bunlong (@Bunlong) on CodePen.

Note:

You can pass an array into the value attribute, allowing you to select multiple options in a select form element.

<select multiple={true} value={['B', 'C']}>