Multi selectforms

Searchable multiple-choice combobox with chips, select-all of the filtered list, max count, disabled and creatable options, and +N chip collapse.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/multi-select

의존 아이템badge button combobox locale style

Creatable

multi-select-creatable.tsx

import { MultiSelect } from "@/components/ui/multi-select";
const labels = ["Breakfast", "Late checkout", "Airport pickup"].map((label) => ({ value: label.toLowerCase().replaceAll(" ", "-"), label }));
export default function MultiSelectCreatable() {  return (    <div className="w-80">      <MultiSelect aria-label="Extras" options={labels} creatable max={4} onCreate={(label) => ({ value: label.toLowerCase(), label })} />    </div>  );}