El componente integrado <option> del navegador te permite mostrar una opción dentro de un cuadro <select>.

<select>
<option value="someOption">Alguna opción</option>
<option value="otherOption">Otra opción</option>
</select>

Referencia

<option>

El componente integrado <option> del navegador te permite mostrar una opción dentro de un cuadro <select>.

<select>
<option value="someOption">Alguna opción</option>
<option value="otherOption">Otra opción</option>
</select>

Mira más ejemplos a continuación.

Props

<option> es compatible con todas las props de elementos comunes.

Además, <option> admite estas props:

Advertencias

  • React no admite el atributo selected en <option>. En su lugar, pasa el value de esta opción al padre <select defaultValue> para un cuadro de selección no controlado, o <select value> para un cuadro de selección controlado.

Uso

Mostrar un cuadro de selección con opciones

Representa un <select> con una lista de componentes <option> dentro para mostrar un cuadro de selección. Asigna a cada <option> un value que represente los datos que se enviarán con el formulario.

Obtén más información sobre cómo mostrar un <select> con una lista de componentes <option>.

export default function FruitPicker() {
  return (
    <label>
      Pick a fruit:
      <select name="selectedFruit">
        <option value="manzana">Manzana</option>
        <option value="banano">Banano</option>
        <option value="naranja">Naranja</option>
      </select>
    </label>
  );
}