Tag Input

Pro

Text that turns into chips on Enter or comma, with suggestions and chips that spring in and out.

Game page

Tag your game

Tags help players find Lantern Valley. Press Enter or a comma to add one.

Customize

Max tags6

Suggestions

Placeholder

Color#ff784f

Installation

Tag Input is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy tag-input.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { TagInput } from "@/components/ui/tag-input";

<TagInput
  name="tags"
  defaultValue={["pixel art"]}
  maxTags={6}
  suggestions={["cozy", "roguelike", "co-op", "puzzle"]}
/>

Props

12 properties

Property	Type	Default	Description
value	string[]	—	Controlled tags. Leave it out to let the field manage itself.
defaultValue	string[]	[]	Starting tags when uncontrolled.
onChange	(tags: string[]) => void	—	Called with the full list after every add or remove.
placeholder	string	"Add a tag"	Placeholder of the text input.
maxTags	number	—	Most tags allowed. Shows a counter under the field.
suggestions	string[]	[]	Offered in a list while typing. Arrow keys and Enter pick one.
label	string	—	Visible label above the field.
color	string	"#ff784f"	Chip tint.
disabled	boolean	false	Blocks editing.
name	string	—	Form field name. Tags submit as one comma-separated value.
id	string	—	Id of the text input.
className	string	—	Extra classes for the wrapper.

Dependencies: motion