Tags Input

Tag entry. Free, MIT · Forms and input › Text

className and style go to the field wrapper; all other props go to the <input>.

Installation

npx valyro-cli@latest add tags-input

npx shadcn@latest add https://valyro.xyz/r/tags-input.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { TagsInput } from 'valyro-ui';

Prop	Type	Default
`value`	`string[]`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`string[]`	`[]`	Initial `value` when uncontrolled.
`onValueChange`	`(tags: string[]) => void`		Called with the new `value` when it changes.
`max`	`number`		Maximum number of tags.
`validate`	`(tag: string, tags: string[]) => boolean`		Return false to reject a tag; the text stays in the input and the field is marked invalid.
`suggestions`	`string[]`		Completions shown in a dropdown while typing (already added tags are hidden).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Field height and text size.
`invalid`	`boolean`		Danger border and `aria-invalid`. Also shown after a rejected tag or while a required field is empty on submit.
`name`	`string`		Submits every tag with the surrounding form, one hidden input per tag. The typed text is not submitted.
`required`	`boolean`		Blocks native form submission while there are no tags.
`labels`	`Partial<TagsInputLabels>`		Overrides for the built-in English text; keys left out keep their defaults.