コンボボックスComboboxExperimental
検索しながら候補を選択できるコンボボックスです。
プレビュー
状態とバリエーション
初期選択あり
よく使う選択肢を初期値にして、操作ステップを減らします。
選べない項目
選択できない項目も表示し、権限や条件によって選べないことを示します。
一致なし
検索結果がない場合は、次の行動がわかるメッセージを表示します。
新規作成（creatable）
検索テキストがどの候補にも一致しない時、「作成」項目で自由入力の値を追加できます。作成の合図（onCreate）を受けて、options への追加と value のセットは呼び出し側が行います。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| 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' | 選択をクリアするボタンの読み上げ用ラベルとツールチップです。 |
| creatable | boolean | false | 検索テキストがどの候補にも一致しない時、自由入力の値を追加する「作成」項目を表示します。(#200) |
| onCreate | (inputValue: string) => void | - | 「作成」選択時に呼ばれます。合図のみで、options への追加と value のセットは呼び出し側が行います。 |
| createLabel | (inputValue: string) => ReactNode | `Create "<text>"` | 「作成」項目のラベルをカスタマイズします。既定は英語表記です。 |
| disabled | boolean | - | 選択ボタンを操作できない状態にします。 |
使い方
import * as React from "react";
import { Combobox, FormControl, FormGroup, FormLabel } from "@gunjo/ui"
const options = [
{ value: "a", label: "Option A" },
{ value: "b", label: "Option B" },
];
export function ComboboxUsage() {
const [value, setValue] = React.useState("");
return (
<FormGroup className="w-full max-w-sm">
<FormLabel htmlFor="option">Option</FormLabel>
<FormControl>
<Combobox id="option" options={options} value={value} onValueChange={setValue} />
</FormControl>
</FormGroup>
);
}使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。