<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>
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:
disabled
: Un booleano. Si esverdadero
, 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
](https://developer.mozilla.org/es/docs/Web/HTML/Element/option#attr-value: El valor que se usará al enviar el<select>
padre en un formulario si se selecciona esta opción.
Advertencias
- React no admite el atributo
selected
en<option>
. En su lugar, pasa elvalue
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> ); }