Combobox

추천 목록을 포함한 자동완성 입력 컴포넌트입니다.

examples/krds/combobox-demo.tsx

"use client"

import {

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/combobox.json

사용법

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>
  )
}

구성

단순

A single-line input and a flat list (see Basic).

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

칩 포함

Multi-select with multiple, chips, and a chips input (see Multiple).

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

그룹과 컬렉션 포함

Nested items per group using ComboboxCollection inside each ComboboxGroup, with a separator between groups (see Groups).

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

커스텀 항목

Use itemToStringValue when your items are objects.

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>
  )
}

다중 선택

Use multiple with chips for multi-select behavior.

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>
  )
}

예제

Basic

A simple combobox with a list of frameworks.

examples/krds/combobox-basic.tsx

"use client"

import {

Multiple

A combobox with multiple selection using multiple and ComboboxChips.

민원봉사과

examples/krds/combobox-multiple.tsx

"use client"

import * as React from "react"

Clear Button

showClear prop으로 clear 버튼을 표시합니다.

examples/krds/combobox-clear.tsx

"use client"

import {

Groups

Use ComboboxGroup and ComboboxSeparator to group items.

examples/krds/combobox-groups.tsx

"use client"

import {

Custom Items

You can render a custom component inside ComboboxItem.

examples/krds/combobox-custom.tsx

"use client"

import {

Invalid

aria-invalid prop으로 Combobox를 invalid 상태로 표시합니다.

examples/krds/combobox-invalid.tsx

"use client"

import {

Disabled

disabled prop으로 Combobox를 비활성화합니다.

examples/krds/combobox-disabled.tsx

"use client"

import {

Auto Highlight

autoHighlight prop으로 필터링 시 첫 번째 항목을 자동 하이라이트합니다.

examples/krds/combobox-auto-highlight.tsx

"use client"

import {

You can trigger the combobox from a button or any other component by using the render prop. Move the ComboboxInput inside the ComboboxContent.

examples/krds/combobox-popup.tsx

"use client"

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

Input Group

You can add an addon to the combobox by using the InputGroupAddon component inside the ComboboxInput.

examples/krds/combobox-input-group.tsx

"use client"

import { GlobeIcon } from "lucide-react"

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/combobox-rtl.tsx

"use client"

import * as React from "react"

API 참조

컴포넌트 API는 설치된 소스의 타입 정의를 기준으로 확인하세요.

Collapsible Command