CommandCombobox

検索可能なコンボボックスコンポーネント。単一選択・複数選択に対応。

インポート

import { CommandCombobox } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { CommandCombobox } from '@caroainc/ui-components/command-combobox'

Select との使い分け

場面	使うもの
選択肢が少ない・固定（ステータス、ロール等）	`Select`
選択肢が多い・検索が必要（メンバー、プロジェクト等）	`CommandCombobox`

単一選択

選択中: 未選択

const [value, setValue] = useState('')
 
<CommandCombobox
  options={[
    { value: '1', label: '田中太郎', subtitle: 'デザイナー' },
    { value: '2', label: '鈴木花子', subtitle: 'ディレクター' },
    { value: '3', label: '佐藤一郎', subtitle: 'エンジニア' },
  ]}
  value={value}
  onValueChange={setValue}
  placeholder="メンバーを選択..."
  searchPlaceholder="名前で検索..."
  emptyText="見つかりません"
/>

複数選択

multiple を指定すると複数選択モードになります。選択済みアイテムはBadgeで表示され、個別に解除できます。

選択中: 0名

const [values, setValues] = useState<string[]>([])
 
<CommandCombobox
  multiple
  options={members}
  value={values}
  onValueChange={setValues}
  placeholder="メンバーを選択..."
  maxDisplay={3}
/>

Props

共通Props

Prop	Type	Default	Description
`options*`	`{ value: string; label: string; subtitle?: string }[]`	`-`	選択肢の配列
`placeholder`	`string`	`'選択してください'`	プレースホルダー
`searchPlaceholder`	`string`	`'検索...'`	検索欄のプレースホルダー
`emptyText`	`string`	`'該当する項目がありません'`	結果が空の時のメッセージ
`disabled`	`boolean`	`-`	無効状態
`loading`	`boolean`	`-`	ローディング表示
`onSearchChange`	`(search: string) => void`	`-`	サーバーサイド検索時のコールバック（デバウンス付き）
`debounceMs`	`number`	`300`	onSearchChangeのデバウンス間隔（ms）
`size`	`'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl'`	`'default'`	トリガーButtonへ委譲されるサイズ

refはトリガーのbutton要素へフォワードされます。id / aria-* / name等の未知propsもトリガーButtonへそのまま委譲されるため、FieldのFieldControlやreact-hook-formのFormControlと組み合わせて使用できます。

<FieldControl>
  <CommandCombobox options={options} value={value} onValueChange={setValue} />
</FieldControl>

単一選択（デフォルト）

Prop	Type	Default	Description
`value`	`string`	`-`	選択された値
`onValueChange`	`(value: string) => void`	`-`	値が変更された時のコールバック

複数選択（`multiple={true}`）

Prop	Type	Default	Description
`multiple*`	`true`	`-`	複数選択モードを有効にする
`value`	`string[]`	`-`	選択された値の配列
`onValueChange`	`(value: string[]) => void`	`-`	値が変更された時のコールバック
`maxDisplay`	`number`	`3`	トリガーに表示する選択済みアイテムの最大数。超えた分は「+N」表示

CommandCombobox

On this page