Forms

Multi Select

Pick multiple values shown as removable chips.

Import

tsx

import { MultiSelect } from "@cooud-ui/ui";

bash

npx cooud-ui add multi-select

Examples

Default

Select multiple values; each shows as a removable chip in the trigger.

Skills

TypeScriptReact

2 selected.

tsx

const skillOptions = [
  { value: "typescript", label: "TypeScript" },
  { value: "react", label: "React" },
  { value: "node", label: "Node.js" },
  { value: "postgres", label: "PostgreSQL" },
  { value: "tailwind", label: "Tailwind CSS" },
  { value: "graphql", label: "GraphQL" },
  { value: "rust", label: "Rust", disabled: true },
];

function MultiSelectDemo() {
  const [skills, setSkills] = useState<string[]>(["typescript", "react"]);

  return (
    <Field className="max-w-sm">
      <FieldLabel id="skills-label">Skills</FieldLabel>
      <MultiSelect
        options={skillOptions}
        value={skills}
        onValueChange={setSkills}
        placeholder="Select skills…"
        aria-labelledby="skills-label"
      />
      <FieldDescription>
        {skills.length > 0 ? `${skills.length} selected.` : "Pick one or more skills."}
      </FieldDescription>
    </Field>
  );
}

Max display

Cap visible chips with `maxDisplay`; the rest collapse into a +N badge.

TypeScriptReact

tsx

function MultiSelectMaxDisplayDemo() {
  const [skills, setSkills] = useState<string[]>([
    "typescript",
    "react",
    "node",
    "postgres",
  ]);

  return (
    <MultiSelect
      options={skillOptions}
      value={skills}
      onValueChange={setSkills}
      maxDisplay={2}
      placeholder="Select skills…"
      aria-label="Skills"
      className="max-w-sm"
    />
  );
}

API Reference

Generated from the component's exported types.

MultiSelectProps

Prop	Type	Default	Description
`options`*	`MultiSelectOption[]`	—	Options shown in the searchable list.
`value`	`string[]`	—	Controlled selection. Provide together with `onValueChange`.
`defaultValue`	`string[]`	—	Uncontrolled initial selection.
`onValueChange`	`(value: string[]) => void`	—	Called with the next selection whenever it changes.
`placeholder`	`string`	`"Select…"`	Text shown in the trigger when nothing is selected.
`searchPlaceholder`	`string`	`"Search…"`	Placeholder for the search input inside the popover.
`emptyText`	`string`	`"No results found."`	Text shown when the search yields no results.
`maxDisplay`	`number`	—	Maximum number of chips to render before collapsing the rest into a "+N" badge. When omitted, every selected chip is rendered.
`disabled`	`boolean`	`false`	Disable the whole control.
`removeLastOnBackspace`	`boolean`	`true`	When true (default), pressing Backspace with an empty search removes the last selected item.
`className`	`string`	—	Extra classes for the trigger button.
`contentClassName`	`string`	—	Extra classes for the popover content.
`aria-label`	`string`	—	Accessible label for the trigger when no visible label is associated.
`aria-labelledby`	`string`	—	id of an element that labels the trigger.
`aria-invalid`	`boolean \| "true" \| "false"`	—	Marks the trigger as invalid (e.g. from a Form layer), applying error styling.
`open`	`boolean`	—	Controls the popover open state (controlled).
`defaultOpen`	`boolean`	—	Initial popover open state (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	—	Called when the popover open state changes.