폼과 선택@neumorphism-ui/combobox

Combobox

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

@neumorphism-ui/combobox

Registry JSON

미리보기

도시 검색

설치

npx shadcn@latest add @neumorphism-ui/combobox

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

"use client";

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

Example

export default function Example() {
  const cities = ["Busan", "London", "Seoul", "Tokyo"];
  return (<div className="w-full max-w-sm"><Combobox items={cities}><ComboboxLabel>{"도시 검색"}</ComboboxLabel><ComboboxInput placeholder={"도시 검색"} /><ComboboxContent><ComboboxEmpty>{"일치하는 도시가 없습니다."}</ComboboxEmpty><ComboboxList>{(city: string) => <ComboboxItem key={city} value={city}>{city}</ComboboxItem>}</ComboboxList></ComboboxContent></Combobox></div>);
}

API 레퍼런스

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

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성