ui-multi-select

Combine shadcn/ui Popover and Command components to render a dropdown with checkboxes, and display selected values as removable Badge chips inside the trigger button. Control state with a string array of values and an onChange callback.

Wrap the MultiSelect inside a FormField render prop, passing field.value as the value and field.onChange as the change handler. Validate the array with a Zod schema such as z.array(z.string()).min(1) to require at least one selection.

No, shadcn/ui does not ship a MultiSelect out of the box. You compose one from the Command, Popover, and Badge primitives, which this component does with search filtering, tag removal, and a selection count footer.

Client-side filtering with CommandInput works well for lists under about 200 options. For larger datasets, use a server-side search approach such as a SearchableSelect component that queries options asynchronously.

Add an optional color property to each option object and apply it to the Badge via inline styles for background, text, and border colors. This is useful for visually distinguishing statuses like Draft, Approved, or Rejected.