<option>

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

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

Referência
- <option>
Uso
- Exibindo uma caixa de seleção com opções

Referência

`<option>`

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

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

Veja mais exemplos abaixo.

Props

<option> permite o uso de todas as props comuns dos elementos.

Além disso, <option> oferece suporte às seguintes props:

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

Observações

O React não oferece suporte ao atributo selected em <option>. Em vez disso, passe o value da opção ao componente pai <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. Atribua a cada <option> um value representando os dados a serem submetidos com o formulário.

Fork

export default function FruitPicker() {
  return (
    <label>
      Pick a fruit:
      <select name="selectedFruit">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
    </label>
  );
}

Previous<input>Next<progress>