Multi-select

Forms

Searchable multiple choices with removable selections, form values and clear validation.

React · copy into your project · light and dark themes

Try it

Variant

Shared workspaces

Workspace 01

Search, select several workspaces, or use the custom scroll thumb to reach the full list.

1 selected.

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/multi-select.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes item-adornment. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/item-adornment.json https://luv-jeri.github.io/cojeev-ui/r/multi-select.json

Using multi-select

Items show stable, varied blob adornments by default. Set adornment={false} to hide, supply {shape,color,icon,effect}, or pass a custom icon element.
Use value and onValueChange for controlled selection, or defaultValue for internal state. A name submits repeated values with a native form.
Disabled options stay locked. Values no longer present in options stay visible and removable, so filtering does not silently discard a selection.
Use description for guidance and error for validation. This component handles a bounded local set of choices; it does not fetch or virtualize options.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

MultiSelectProps

Prop	Type	Required
`label` Visible accessible label for the trigger and its choices.	`string`	Yes
`options`	`readonly MultiSelectOption[]`	Yes
`adornment` Per-option adornments take precedence over this shared default.	`ItemAdornmentValue`	No
`value` Controlled selected values. Values absent from options remain removable.	`readonly string[]`	No
`defaultValue` Initial selection when value is omitted.	`readonly string[]`	No
`onValueChange`	`(value: string[]) => void`	No
`name` Submits one hidden form entry per selected value.	`string`	No
`id`	`string`	No
`disabled`	`boolean`	No
`description`	`string`	No
`error` Sets the trigger's invalid state and announces the error.	`string`	No
`placeholder`	`string`	No
`searchPlaceholder`	`string`	No
`emptyMessage`	`string`	No
`noResultsMessage`	`string`	No
`className`	`string`	No

Accessibility

The trigger has a visible label. Search, independently checked options and removable tokens expose their own accessible names.
Arrow keys, Home and End move through enabled choices; Space toggles. Escape closes the popup and returns focus.
A disabled field closes and locks its controls. Error text is announced and linked to the invalid trigger.

States and appearance

restopensearchingselectedemptyinvaliddisabled

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.