<option>

El componente integrado <option> del navegador le 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>
Uso
- Mostrar un cuadro de selección con opciones

Referencia

`<option>`

El componente integrado <option> del navegador le 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>

Vea más ejemplos a continuación.

Props

<option> es compatible con todos los props de elementos comunes.

Además, <opción> admite estas props:

disabled: Un booleano. Si es verdadero, la opción no se podrá seleccionar y aparecerá atenuada.
label: Una string. Especifica el significado de la opción. Si no se especifica, se utiliza el texto dentro de la opción.
value: El valor que se usará al enviar el padre <select> en un formulario si se selecciona esta opción.

Advertencias

React no admite el atributo selected en <option>. En su lugar, pase 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. Asigne a cada <option> un value que represente los datos que se enviarán con el formulario.

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

Fork

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>
  );
}

Previous<input>Next<progress>