Select
View on GitHub: Copmonent複数の選択肢から1つを選ぶためのコンポーネント。内部でネイティブの<select>要素を利用
Example#
Props#
<select>
要素をベースにしています。 表にない属性もprop経由で使用できます。
Name | Type | Default | Description |
---|---|---|---|
className optional | string | - | CSSのクラス |
data-* optional | string | - | Custom data attributes |
disabled | boolean | false | フィールドを無効化する |
id optional | string | - | ネイティブ要素の `id` 属性。ページで固有のIDを指定 |
isInvalid | boolean | false | 有効でない入力を保持しているかどうか |
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で選択肢を非表示とすることができます