Fluent UI BlazorにおけるCombobox、Select、Listbox、Checkbox、RadioGroupの使い分け
始めに
Combobox、Select、Listbox、Checkbox、RadioGroupいずれもとある集合から1つまたは複数の選択ができるコンポーネントになっている。
それぞれのコンポーネントの違いやそれにともなう使い分けについてここでは記述していく。
Combobox
コンボボックスはユーザーがとある集合から1つの値を選択できるようにするプルダウンリストのある入力コンポーネントです。
Selectとの違いは複数選択ができないところです。
Autocomplete機能もユーザー体験上とてもリッチな機能になっています。
実装上、ComboboxとSelectとListboxは共通の部分がとても多いのですがこのAutocompleteはComboboxの独自実装になっています。
まずは、Inline Autocompleteのモードで見てみましょう
この状態から一文字「J」と入力すると
先頭に「J」がつく候補のうち一番先頭にある「Jon Pertwee」が選択候補となります。
このまま、選択できますし、下矢印キーで選択すると次の「Jodie Whittaker」が選択候補となります。
さらに、List Autocompleteのモードで同様のことをすると
視覚的に選択候補が2つに絞られるように見えます。
しかし、選択候補は選択状態にはなっておらず、マウスなどで選択状態にしてこの中から選択する必要があります。
さらに、BothAutocompleteのモードで同様に
リスト候補が2つに絞られた上に選択状態になっているためにこのままでも一番先頭の要素が選択されている状態となっています。
Select
Comboboxとの違いは複数選択可能なオプションがあることです。
Listbox
リストボックスは常に選択要素の一部が表示されていることが重要な場合に採用されます。
SelectやComboboxの1つだけを選択するモードの場合は選択要素はプルダウンするまで隠れていて見えませんがListboxではその一部が常に表示されています。このことが重要な場合はListboxを採用します。
複数選択モードに関しては現在動作していません。
複数選択が必要な場合にはSelectまたはCheckboxを使用します。
Checkbox
チェックボックスを使用するとグループから複数のオプションを選択したり一つのオプションのオンとオフを切り替えたりできます。
グループから一つのオプションを選択できるように制限するにはラジオグループまたはコンボボックスを使用してください。
チェックボックスは即時変更はせずボタンの押下などの送信ステップが必要です。即時効果が必要な場合はSwitchを使用してください。
はい、いいえの選択肢がある場合はチェックボックスを一つ使います。
チェックボックスグループは複数のオプションを選択できるときに使用します。チェックボックスのグループの要素は7つまでに制限することをお勧めします。7つ以上ある場合はSelectを使用することを検討します。
Radio Group
ラジオグループを使用するとグループから1つのオプションを選択できます。
レイアウトに十分なスペースがあり、すべてのオプションを一度に表示することが重要な場合ラジオグループを使用することが適しています。グループの要素の数は5つまでが適しています。
十分なスペースがない場合、Comboboxを使用してください。
Discussion