Forms

Tag Input

Keyboard-friendly tag entry with duplicate prevention, paste support, a limit, removable tokens, and form values.

Subscription Included with the Velocity Components subscription.

bash

$ velocityx add standard-tag-input

Built for react. Needs react, react-dom already installed as peer dependencies. An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.

Full docs for Tag Input →

Needs a licence key — subscribe here, then velocityx loginonce.

react v1.0.0 react react-dom

Tag Input

Topics

Design systemsAccessibility

Press Enter to add a tag. Paste a comma-separated list to add several.

Props

Name	Type	Required	Default
name	string	No	'tags'
label	string	No	'Tags'
defaultTags	array	No	[]
maxTags	number	No	10
placeholder	string	No	'Type a tag and press Enter'
description	undocumented	Yes
disabled	boolean	No	false
onChange	undocumented	Yes
className	string	No	''

3 fields in this table have an undocumented type — see source for the exact shape.

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text

components/velocity/standard-tag-input/TagInput.jsx

Using the Tag Input component

Install it with velocityx add standard-tag-input. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Tag Input

Props

File this creates

Using the Tag Input component

Related components