Skip to main content

Combobox

mfe-lib-shared에서 제공하는 콤보박스 컴포넌트입니다.
입력과 함께 제안 목록에서 항목을 고르는 자동완성형 컨트롤입니다. 검색·필터·폼에서 옵션을 빠르게 찾아 선택할 때 자주 사용합니다.
구현은 shadcn/ui Combobox(Radix UI 기반)와 같은 합성 컴포넌트 패턴을 따르며, 세부 동작은 공식 문서의 API Reference(Base UI)를 참고하면 됩니다.


shadcn/ui 참고

상세 설치·예제·API는 공식 문서를 참고하세요.

문서에서 다루는 내용 예시

  • 기본 합성: ComboboxComboboxInput + ComboboxContentComboboxEmpty, ComboboxList, ComboboxItem
  • 데이터: items 배열과 ComboboxList의 렌더 prop으로 각 항목 매핑
  • 객체 항목: itemToStringValue로 문자열 검색·표시용 값 지정
  • 다중 선택: multiple, 칩 UI(ComboboxChips, ComboboxValue, ComboboxChip, ComboboxChipsInput)와 value / onValueChange
  • 그룹: ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxSeparator
  • 기타: showClear(지우기 버튼), aria-invalid, disabled, autoHighlight, render(팝업 트리거), InputGroupAddon과의 조합 등
  • RTL: shadcn/ui RTL 가이드 및 동일 페이지 RTL 예제 참고

세부 prop·동작은 문서의 API Reference 링크를 따라가면 됩니다.


Combobox 인터랙티브 예제