127 Components

Multi-Select Tag Input

Inputs

Interactive tag and chip input with live autocomplete suggestions, custom tag creation via Enter or comma, Backspace removal, and max-tag limits.

Tech Stack Tags

3/8

ReactTypeScriptFramer Motion

Press Enter or , to add · Backspace to remove

Installation

Install directly into your project using the shadcn CLI or copy the source code manually.

Requires:framer-motionlucide-reactclsxtailwind-merge

$npx shadcn@latest add "https://boseui.site/r/multi-select-tag-input.json"

TypeScript props supported by <MultiSelectTagInput />.

10 props

Prop	Type	Default	Description
suggestions	`TagSuggestion[]`	—	Array of suggested tags ({ value, label, category }) shown in the dropdown.
value	`string[]`	—	Controlled array of selected tag values.
defaultValue	`string[]`	`["react", "typescript", "framer-motion"]`	Initial selected tag values for uncontrolled mode.
onChange	`(tags: string[]) => void`	—	Callback fired whenever selected tags are added or removed.
placeholder	`string`	`"Add tag or select..."`	Placeholder text shown when no tags are selected.
label	`string`	`"Tech Stack Tags"`	Optional label displayed above the tag container.
maxTags	`number`	`8`	Maximum number of tags allowed before the input locks.
allowCustomTags	`boolean`	`true`	Allows users to create custom tags not present in suggestions.
disabled	`boolean`	`false`	Disables adding or removing tags.
className	`string`	—	Additional Tailwind CSS classes for the root container.

Spring-animated tag pills with popLayout transitions when adding or removing items.
Supports Enter and comma (,) to create custom tags and Backspace to remove the last tag.
Duplicate prevention, max-tag counter, and filterable suggestion dropdown.