ブラウザ組み込みの <option> コンポーネントを利用することで、<select> ボックス内に選択肢をレンダーすることができます。

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

リファレンス

<option>

ブラウザ組み込みの <option> コンポーネント を利用することで、<select> ボックス内にオプションをレンダーすることができます。

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

さらに例を見る

props

<option> は、一般的な要素の props をすべてサポートしています。

さらに、<option> は以下の props をサポートしています：

  • disabled: ブーリアン。true の場合、オプションは選択できなくなり、薄暗く表示されます。
  • label: 文字列。オプションの意味を指定します。指定しない場合、オプション内のテキストが使用されます。
  • value: このオプションが選択された場合に、親の <select> をフォームで送信する際に使用される値。

注意点

  • React は <option> の selected 属性をサポートしていません。代わりに、このオプションの value を親の <select defaultValue> に渡して非制御のセレクトボックスを作成するか、<select value> に渡して制御されたセレクトボックスを作成します。

使用法

選択肢を含むセレクトボックスを表示する

<option> コンポーネントのリストを内部に含む <select> をレンダーして、セレクトボックスを表示します。各 <option> に、フォームで送信されるデータを表す value を指定してください。

<select> を <option> コンポーネントのリストと共に表示する方法についての詳細は、こちらをご覧ください。

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>