Combobox

목록을 검색하면서 값을 골라야 할 때 사용합니다.

미리보기

도시 검색과 선택

입력으로 도시 목록을 좁히고 일치하는 항목이 없으면 안내를 표시합니다.

도시 검색

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/combobox

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

items, ComboboxLabel, ComboboxInput을 제공하세요. 결과가 없을 때의 안내와 ComboboxList를 구성하고 각 결과를 고유한 ComboboxItem으로 렌더링합니다.

"use client";

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList } from "@/components/ui/combobox";

const cities = ["London", "Seoul", "Tokyo"];

export default function Example() {
  return (
    <Combobox items={cities}>
      <ComboboxLabel>City</ComboboxLabel>
      <ComboboxInput placeholder="Search cities" />
      <ComboboxContent>
        <ComboboxEmpty>No matching cities.</ComboboxEmpty>
        <ComboboxList>{(city: string) => <ComboboxItem key={city} value={city}>{city}</ComboboxItem>}</ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}

API 레퍼런스

필터링·빈 결과·키보드 선택을 지원하는 검색형 입력. ComboboxLabel과 빈 결과 문구를 제공하세요. 방향키·Enter·Escape 및 실제 IME 입력을 확인하세요.

컴포넌트	속성	타입	기본값	설명
`Combobox`	`items`	`unknown[]`	`—`	검색하고 선택할 원본 항목입니다.
`Combobox`	`value / onValueChange`	`Combobox.Root.Props`	`—`	제어 상태 또는 최초 상태를 지정합니다.
`Combobox`	`multiple`	`boolean`	`—`	복수 항목 선택을 허용합니다.

미리보기

도시 검색과 선택

설치

사용법

API 레퍼런스

접근성