O componente <option> embutido no navegador permite renderizar uma opção dentro de uma caixa <select>.

<select>
  <option value="someOption">Some option</option>
  <option value="otherOption">Other option</option>
</select>

Referência

<option>

O componente <option> embutido no navegador permite renderizar uma opção dentro de uma caixa <select>.

<select>
  <option value="someOption">Some option</option>
  <option value="otherOption">Other option</option>
</select>

Veja mais exemplos abaixo.

Props

<option> suporta todas as props comuns de elementos.

Além disso, <option> suporta estas props:

  • disabled: Um booleano. Se true, a opção não será selecionável e aparecerá atenuada.
  • label: Uma string. Especifica o significado da opção. Se não especificado, o texto dentro da opção é utilizado.
  • value: O valor a ser usado ao submeter o <select> pai em um formulário se esta opção for selecionada.

Ressalvas

  • O React não suporta o atributo selected em <option>. Em vez disso, passe o value desta opção para o <select defaultValue> para uma caixa de seleção não controlada, ou <select value> para uma caixa de seleção controlada.

Uso

Exibindo uma caixa de seleção com opções

Renderize um <select> com uma lista de componentes <option> dentro para exibir uma caixa de seleção. Dê a cada <option> um value representando os dados a serem submetidos com o formulário.

Leia mais sobre a exibição de um <select> com uma lista de componentes <option>.

export default function FruitPicker() {
  return (
    <label>
      Escolha uma fruta:
      <select name="selectedFruit">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
    </label>
  );
}
Previous<input>
Next<progress>