Command

インポート

'use client'

基本的な使い方

<Command className="rounded-lg border shadow-md">
  <CommandInput placeholder="検索..." />
  <CommandList>
    <CommandEmpty>結果が見つかりません</CommandEmpty>
    <CommandGroup heading="候補">
      <CommandItem>
        <Icon name="Calendar" />
        カレンダー
      </CommandItem>
      <CommandItem>
        <Icon name="Settings" />
        設定
      </CommandItem>
      <CommandItem>
        <Icon name="User" />
        プロフィール
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="その他">
      <CommandItem>
        <Icon name="HelpCircle" />
        ヘルプ
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Props (CommandItem)

Prop	Type	Default	Description
`onSelect`	`(value: string) => void`	`-`	選択された時のコールバック
`disabled`	`boolean`	`false`	無効状態

Command

インポート

基本的な使い方

Props (CommandItem)

On this page