SingleCombobox

選択肢から1つの値を選択しつつテキスト入力での絞り込みや値追加もできる選択コンポーネントです。6個以上の選択肢から検索しながら1つを選択するときに使います。

使用上の注意

ユースケースに応じてコンポーネントを使い分ける

詳しくは選択コンポーネントの使い分けを参照してください。

単一選択の場合に使用する

値を複数選択させたい場合はMultiComboboxを使用してください。

選択肢が6個以上の場合に使用する

選択肢の数が6個以上で、ユーザーにテキスト入力で値を追加させたり、値を絞り込んで選択させたい場合はSingleComboboxを使用します。

選択肢が5個以下であれば、初期状態で選択肢が一覧できるRadioButtonを使用してください。 ただし、RadioButtonを配置する十分スペースがない場合は、SingleComboboxやSelectの使用を検討します。

入力補助のヒントメッセージとしてプレースホルダを使用しない

SingleComboboxで入力補助のヒントメッセージを表示したい場合はdropdownHelpMessageやFormControlのhelpMessageを使用し、プレースホルダ（placeholder）は使用しないでください。プレースホルダを使用した場合、テキスト入力するとプレースホルダの内容が確認できなくなるため、入力補助として成立しないためです。

dropdownHelpMessageはドロップダウンパネルを表示したときのみ表示されるため、ヒントメッセージを常に表示したい場合は、FormControlのhelpMessageを使用してください。

状態

無効（disabled）

入力および選択操作ができない状態を表現したスタイルです。

SingleComboboxにdisabledを適用すると、テキスト入力不可になりドロップダウンパネルも表示されないため、ユーザーが選択肢を確認できなくなる点に注意してください。

ユーザーはなぜ無効になっているのかわからないことがあります。権限による表示制御のデザインパターンを参考にして、そもそも無効ではなくフォーム自体を非表示にしたり、無効状態の理由を付近に表示することを検討してください。

選択肢にない値の追加

入力された値がリストにない場合、追加して選択できる状態を表現したスタイルです。

ユーザーがその場で選択肢を追加できるようにしたい場合は、SingleComboboxにcreatableを適用してコールバック関数onAddを適切に実装してください。

アクセシビリティ

基本的なアクセシビリティ機能

候補や選択状態を把握できる

SingleComboboxは、候補の状態や選択された項目が支援技術でも確認できるよう実装されています。 これにより、候補を確認しながら項目を選択できます。

キーボードで操作できる

候補の表示や選択はキーボードで操作できます。 これにより、マウスを利用できないユーザーも候補を検索・選択できます。

開発時の考慮点

FormControlと併用する

SingleComboboxコンポーネントは必ずFormControlコンポーネントと併用して、ユーザーが何を選択すべきかを示すラベルを設定してください。FormControlと併用することで、支援技術にも選択の目的が伝達されます。

eslint-plugin-smarthrのsmarthr/a11y-input-in-form-control別タブで開くルールは、SingleComboboxにFormControlを組み合わせることを促すものです。支援技術に選択の目的が伝わらないリスクを防ぐため、有効にして使用することを推奨します。

関連ページ

• 入力する内容や、操作がラベルとして表示されている | アクセシビリティガイドライン
• フォームパーツにアクセシブルネームがある | アクセシビリティガイドライン

[WIP] モバイル

Props

SingleCombobox props