コンボボックスCombobox
Experimental

検索しながら候補を選択できるコンボボックスです。

状態とバリエーション

よく使う選択肢を初期値にして、操作ステップを減らします。

フレームワーク

よく使う選択肢を初期表示しています。

選択できない項目も表示し、権限や条件によって選べないことを示します。

ロール

利用できないロールは表示したまま無効化します。

検索結果がない場合は、次の行動がわかるメッセージを表示します。

フレームワーク

検索結果の有無は、開いた候補一覧の中で伝えます。

表は横にスクロールできます

プロパティ	型	初期値	説明
id	string	-	ラベルと選択ボタンを紐づけるための ID です。
options	ComboboxOption[]	-	値、表示名、無効化状態、無効化理由を持つ選択肢の配列です。
value	string	-	外部で管理する選択値です。
onValueChange	(value: string) => void	-	選択値が変わった時に呼ばれる処理です。クリア時は空文字を返します。
placeholder	string	'Select option...'	未選択時に選択ボタンへ表示するテキストです。
searchPlaceholder	string	'Search...'	候補一覧内の検索欄に表示する入力例です。
searchClearLabel	string	'Clear search'	検索欄をクリアするボタンの読み上げ用ラベルです。
emptyMessage	string	'No option found.'	検索結果がない場合に表示するテキスト。
clearable	boolean	true	選択済みの値をクリアするボタンを表示するか。
clearLabel	string	'Clear selection'	選択をクリアするボタンの読み上げ用ラベルとツールチップです。
disabled	boolean	-	選択ボタンを操作できない状態にします。