O componente nativo do navegador <option> permite que você renderize uma opção dentro de uma caixa <select>.

<select>
  <option value="someOption">Alguma opção</option>
  <option value="otherOption">Outra opção</option>
</select>

Referência

<option>

O componente nativo do navegador <option> permite que você renderize um option dentro de uma caixa <select>.

<select>
  <option value="someOption">Alguma opção</option>
  <option value="otherOption">Outra opção</option>
</select>

Veja mais exemplos abaixo.

Props

<option> suporta todas as props comuns do elemento.

Adicionalmente, <option> suporta estas props:

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

Ressalvas

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

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 que representa os dados a serem enviados com o formulário.

Leia mais sobre como exibir um <select> com uma lista de componentes <option>.

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