Tag Input

Turn typing into tags. They spring in, reflow smoothly, and Backspace asks twice before deleting.

Inputs

Topics

design-systemreactmotion

Enter or comma to add, Backspace twice to remove. Paste a comma separated list to add many at once.

Playground

Tweak the props, the preview and the code follow.

reactmotion

Props

placeholder

max6

disabled

<TagInput
  defaultValue={["react", "motion"]}
  max={6}
  placeholder="Add
  a
  tag…"
/>

npx @plumsydev/plum-ui add tag-input

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

<TagInput defaultValue={["react"]} placeholder="Add a tag…" />

validate rejects bad entries, max caps the count and onReject reports why.

Invite teammates

lea@acme.com

1 / 5 seats used

Controlled value plus a list of quick picks.

Labels

bug

Extends the native input for everything but value, defaultValue and onChange.

Prop	Type	Default
`value` Controlled tags.	`string[]`	`—`
`defaultValue` Initial tags when uncontrolled.	`string[]`	`[]`
`onValueChange` Called when tags are added or removed.	`(tags: string[]) => void`	`—`
`max` Maximum number of tags.	`number`	`Infinity`
`validate` Return false or an error message to refuse a tag.	`(tag: string) => string \| boolean \| undefined`	`—`
`onReject` Called when a tag is refused.	`(tag: string, reason: string) => void`	`—`
`separators` Keys that commit the current text.	`string[]`	`["Enter", ","]`