Select

Example#

Usage#

Label

<label> とセットでマークアップしてください。次の点でメリットがあります:

• クリック/タップエリアが拡張されます。<label>をクリック/タップすることで、フィールドにフォーカスが移動します。
• スクリーンリーダーのユーザーが、そのフィールドが何を表しているのかを理解できます
  • スクリーンリーダーの場合、入力欄がフォーカスされた場合に、<label> の内容が読み上げられます[^read-label]
• <label> の代わりに aria-labelledby で他要素のテキストを参照することもできます（できるだけ<label>を使用してください）

ID属性を経由して<label>とフィールドを紐付けます（例では<Input>を使用しています）。

<label htmlFor="some-filed">ラベル</label>
<Input id="some-field" />

ID属性は、ページで固有の値を指定する必要があります。

Typeahead#

ネイティブの<select>要素は、キーボードによる検索（Typeahead）に対応しています。もちろん<Select>コンポーネントもその機能を有しています。 選択肢を開いた状態で、押下したキーに準じた選択肢が選択されます（日本語には対応していません）。

できるだけ装飾のない値を<option>のchildren propに指定してください。例えば、【1988】または📅1988ではなく1988をvalueの値に指定してください。値の前方に装飾がついている場合、この機能は正しく動作しません。

ラジオボタンか？チェックボックスか？もしくはセレクトボックスか？

「値を選ぶ」ことに対してはどれも要求を満たすことができます。しかしそれぞれ特性が違うため、状況に応じて使い分けが必要です。

• ラジオボタンやセレクトボックスは、複数の選択肢の中から一つを選択します
• ラジオボタンは、一度選択したら、空に戻すことができません（空の選択肢を含めることで解決はできます）
• セレクトボックスは、一度選択したら、空に戻すことができません（空の選択肢を含めることで解決はできます）
• セレクトボックスは、大量の選択肢を用意しても領域を占有しません
• セレクトボックスは、選択肢が隠れるためユーザーが内容を把握しづらい一面があります
• チェックボックスには2つの使用方法があります
  • 複数の選択肢から、複数を選択します
  • もしくは、ひとつの選択肢の選択を切り替えます
• チェックボックスは、値を空に戻すことができます

Keyboard Interaction#

• フォーカスを受け取り、EnterキーやSpaceキーで選択肢を表示することができます
  • カーソルキーの上下で選択を切り替えることができます
  • EnterまたはSpaceで選択を確定できます
  • ESCで選択肢を非表示とすることができます