125k

Combobox

PreviousNext

候補のリストを含むオートコンプリート入力。

BaseRadixReact Aria
"use client"

import {

インストール

pnpm dlx shadcn@latest add combobox

使用法

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
 
export function ExampleCombobox() {
  return (
    <Combobox items={frameworks}>
      <ComboboxInput placeholder="Select a framework" />
      <ComboboxContent>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item} value={item}>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}

構成

シンプル

単一行入力とフラット リスト (基本 を参照)。

Combobox
├── ComboboxInput
└── ComboboxContent
    ├── ComboboxEmpty
    └── ComboboxList
        ├── ComboboxItem
        └── ComboboxItem

チップ付き

multiple、チップ、およびチップ入力による複数選択 (複数 を参照)。

Combobox
├── ComboboxChips
│   ├── ComboboxValue
│   │   └── ComboboxChip
│   └── ComboboxChipsInput
└── ComboboxContent
    ├── ComboboxEmpty
    └── ComboboxList
        ├── ComboboxItem
        └── ComboboxItem

グループとコレクションを使用する

各 ComboboxGroup 内で ComboboxCollection を使用し、グループ間に区切り文字を使用してグループごとに項目をネストします (グループ を参照)。

Combobox
├── ComboboxInput
└── ComboboxContent
    ├── ComboboxEmpty
    └── ComboboxList
        ├── ComboboxGroup
        │   ├── ComboboxLabel
        │   └── ComboboxCollection
        │       ├── ComboboxItem
        │       └── ComboboxItem
        ├── ComboboxSeparator
        └── ComboboxGroup
            ├── ComboboxLabel
            └── ComboboxCollection
                ├── ComboboxItem
                └── ComboboxItem

カスタム項目

アイテムがオブジェクトの場合は itemToStringValue を使用します。

import * as React from "react"
 
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
 
type Framework = {
  label: string
  value: string
}
 
const frameworks: Framework[] = [
  { label: "Next.js", value: "next" },
  { label: "SvelteKit", value: "sveltekit" },
  { label: "Nuxt", value: "nuxt" },
]
 
export function ExampleComboboxCustomItems() {
  return (
    <Combobox
      items={frameworks}
      itemToStringValue={(framework) => framework.label}
    >
      <ComboboxInput placeholder="Select a framework" />
      <ComboboxContent>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(framework) => (
            <ComboboxItem key={framework.value} value={framework}>
              {framework.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}

複数選択

複数選択動作のチップでは multiple を使用します。

import * as React from "react"
 
import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxValue,
} from "@/components/ui/combobox"
 
const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
 
export function ExampleComboboxMultiple() {
  const [value, setValue] = React.useState<string[]>([])
 
  return (
    <Combobox
      items={frameworks}
      multiple
      value={value}
      onValueChange={setValue}
    >
      <ComboboxChips>
        <ComboboxValue>
          {value.map((item) => (
            <ComboboxChip key={item}>{item}</ComboboxChip>
          ))}
        </ComboboxValue>
        <ComboboxChipsInput placeholder="Add framework" />
      </ComboboxChips>
      <ComboboxContent>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item} value={item}>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}

基本

フレームワークのリストを含むシンプルなコンボボックス。

"use client"

import {

複数

multiple と ComboboxChips を使用した複数選択のコンボボックス。

"use client"

import * as React from "react"

クリア ボタン

showClear プロップを使用してクリア ボタンを表示します。

"use client"

import {

グループ

ComboboxGroup および ComboboxSeparator を使用して項目をグループ化します。

"use client"

import {

カスタム項目

ComboboxItem 内でカスタム コンポーネントをレンダリングできます。

"use client"

import {

無効な状態

コンボボックスを無効な状態にするには、aria-invalid プロパティを使用します。

"use client"

import {

無効

disabled プロパティを使用してコンボボックスを無効にします。

"use client"

import {

自動ハイライト

autoHighlight プロップを使用して、フィルターの最初の項目を自動的に強調表示します。

"use client"

import {

ポップアップ

render プロップを使用すると、ボタンまたはその他のコンポーネントからコンボボックスをトリガーできます。ComboboxInput を ComboboxContent 内に移動します。

"use client"

import { Button } from "@/components/ui/base/button"

入力グループ

ComboboxInput 内の InputGroupAddon コンポーネントを使用して、コンボボックスにアドオンを追加できます。

"use client"

import { GlobeIcon } from "lucide-react"

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

"use client"

import * as React from "react"

API リファレンス

詳細については、ベース UI ドキュメントを参照してください。