Combobox

설치 확인

검색해서 고르기, 결과 없음, 선택 해제

1. 목적과 출처

검색해서 고르기, 결과 없음, 선택 해제

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/combobox.tsx
Registry: @adcapsule/combobox

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Combobox 쓰임
쓰임	모양
하나 고르기
여러 개 multiple	버그 디자인
비활성 disabled

3. 속성 바꿔 보기

고른 값: 없음

지우기 버튼(showClear)disabled여러 개(multiple)

<Combobox items={labels}>
  <ComboboxInput placeholder="라벨 검색" showClear />
  <ComboboxContent>
    <ComboboxEmpty>검색 결과가 없습니다.</ComboboxEmpty>
    <ComboboxList>
      {(item) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/combobox

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/button, @adcapsule/input-group, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Combobox items={labels}>
  <ComboboxInput placeholder="라벨 검색" />
  <ComboboxContent>
    <ComboboxEmpty>검색 결과가 없습니다.</ComboboxEmpty>
    <ComboboxList>{(item) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}</ComboboxList>
  </ComboboxContent>
</Combobox>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

multiple과 ComboboxChips로 여러 개
showClear로 지우기 버튼
ComboboxEmpty 문구
items는 문자열이나 객체 배열

공통으로 유지할 토큰

radius.md (입력·펼친 목록 6px)
radius.sm (목록 항목·칩 4px)
surface.raised (칩, --muted)
control.height.md

쓰임

모양

하나 고르기

여러 개 multiple

버그

디자인

비활성 disabled

3. 속성 바꿔 보기

고른 값: 없음

지우기 버튼(showClear)disabled여러 개(multiple)

<Combobox items={labels}>
  <ComboboxInput placeholder="라벨 검색" showClear />
  <ComboboxContent>
    <ComboboxEmpty>검색 결과가 없습니다.</ComboboxEmpty>
    <ComboboxList>
      {(item) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/combobox

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/button, @adcapsule/input-group, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Combobox items={labels}>
  <ComboboxInput placeholder="라벨 검색" />
  <ComboboxContent>
    <ComboboxEmpty>검색 결과가 없습니다.</ComboboxEmpty>
    <ComboboxList>{(item) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}</ComboboxList>
  </ComboboxContent>
</Combobox>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

multiple과 ComboboxChips로 여러 개
showClear로 지우기 버튼
ComboboxEmpty 문구
items는 문자열이나 객체 배열

공통으로 유지할 토큰

radius.md (입력·펼친 목록 6px)
radius.sm (목록 항목·칩 4px)
surface.raised (칩, --muted)
control.height.md

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿