Stalk UI

$pnpm dlx @stalk-ui/cli add @stalk-ui/tags-input

<TagsInput aria-label="Tags" defaultValue={['design', 'engineering']} placeholder="Add a tag…" />

<TagsInput aria-label="Tags" defaultValue={['one', 'two']} max={5} tone="success" />

Prop	Type	Required	Default	Description
`'aria-label'`	`string`	No	-	Accessible name for the entry field.
`'aria-labelledby'`	`string`	No	-	Id of an element labelling the entry field.
`'aria-describedby'`	`string`	No	-	Id of an element describing the entry field.
`addOnBlur`	`boolean`	No	-	Add the pending entry when the field loses focus.
`allowDuplicates`	`boolean`	No	-	Allow the same value more than once. Defaults to false.
`className`	`string`	No	-	-
`defaultValue`	`string[]`	No	-	-
`formatTag`	`(value: string) => string`	No	-	Format/normalize each entry before it becomes a tag (e.g. trim + lowercase an<br />email). Return an empty string to reject the entry. Applied per tag.
`getTagProps`	`(value: string, index: number) => TagStyleProps`	No	-	Per-tag visual overrides — return a \`tone\`/\`variant\`/\`radius\` for each tag so<br />chips can differ in color and style (e.g. color a label by category).
`disabled`	`boolean`	No	-	-
`id`	`string`	No	-	-
`invalid`	`boolean`	No	-	-
`max`	`number`	No	-	Maximum number of tags. Further entries are ignored.
`name`	`string`	No	-	Submitted with a surrounding form: emits a hidden input per tag.
`onValueChange`	`(tags: string[]) => void`	No	-	-
`placeholder`	`string`	No	-	-
`removeLabel`	`string`	No	-	Accessible label for each tag's remove button.
`size`	`TagsInputSize`	No	-	-
`tone`	`TagTone`	No	-	Color palette for the chips. Defaults to \`accent\`.
`value`	`string[]`	No	-	-

TagsInput