複数の選択肢から1つを選ぶためのコンポーネント。内部でネイティブの<select>要素を利用

Example#

Props#

<select>要素をベースにしています。 表にない属性もprop経由で使用できます。

NameTypeDefaultDescription
className
optional
string-CSSのクラス
data-*
optional
string-Custom data attributes
disabledbooleanfalseフィールドを無効化する
id
optional
string-ネイティブ要素の `id` 属性。ページで固有のIDを指定
isInvalidbooleanfalse有効でない入力を保持しているかどうか

Usage#

Label

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

  • クリック/タップエリアが拡張されます。<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ではなく1988valueの値に指定してください。値の前方に装飾がついている場合、この機能は正しく動作しません。

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

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

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

Keyboard Interaction#

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