組み込みブラウザの<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>

さらに下の例をご覧ください。

プロパティ

<option> は、共通の要素プロパティをすべてサポートしています。

さらに、<option> は次のプロパティをサポートします。

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

注意点

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

使い方

オプション付きのセレクトボックスの表示

セレクトボックスを表示するには、内部に <option> コンポーネントのリストを持つ <select> をレンダーします。各 <option> に、フォームで送信されるデータを表す value を与えます。

<option> コンポーネントのリストを持つ <select> の表示について、詳しくはこちらをご覧ください。

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>
  );
}
前へ<input>
次へ<progress>