Tag input

Creates and removes freeform text tokens with paste splitting, duplicate prevention, and validation.

Preview

In action

Name the work

Project keywords

Create a few useful labels. Paste a comma-separated list to add several at once.

When to use

Use it for

Short freeform labels, recipients, or keywords.
Comma-separated or newline-separated pasted values that should become distinct tokens.

Not for

A fixed vocabulary; use MultiSelect.
Long prose; use Textarea.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { TagInput } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/tag-input.

2. Vendor the source

npx @noorddev/vlak-cli add tag-input

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/tag-input.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { TagInput } from "@noorddev/vlak-react";

<TagInput label="Project tags" name="tags" defaultValue={["Research", "Design"]} maxTags={5} validate={(tag) => tag.length > 24 ? "Use 24 characters or fewer" : undefined} />

Props

TagInput

Prop	Type	Default	Description
`value`	`string[]`
`defaultValue`	`string[]`	`[]`
`onValueChange`	`(value: string[]) => void`
`label`	`ReactNode`	`"Tags"`
`name`	`string`
`disabled`	`boolean`
`placeholder`	`string`	`"Add a tag"`
`maxTags`	`number`
`validate`	`(tag: string) => string`		Return an error for an invalid token, or undefined to accept it.
`addLabel`	`string`	`"Add"`
`removeLabel`	`(tag: string) => string`	(tag) => `Remove ${tag}`

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">.

Keyboard

Keys	Does
`Enter, comma`	Commits a trimmed draft as a tag without submitting the form.
`Backspace in an empty input`	Focuses the last tag's remove button.
`Escape`	Clears the current draft and its error.
`Tab, Enter, Space`	Reaches and activates named Add and Remove buttons.

Accessibility

The forwarded ref reaches the text input. Each 44px remove target is named with its tag.
Exact duplicate tags are ignored; validate and maxTags reject an addition while preserving the draft and exposing an alert.
Hidden fields submit each tag under name. Form reset restores uncontrolled tags and clears the draft.
Keyboard composition is respected; Enter does not commit while an input method is composing text.

Markup

<div class="rs-tag-input"><label class="rs-tag-input-label" for="project-tags">Project tags</label><ul class="rs-tag-input-list" aria-label="Current tags"><li class="rs-tag-input-tag">Design<button class="rs-btn-ghost rs-tag-input-remove" type="button" aria-label="Remove Design">×</button></li></ul><div class="rs-tag-input-row"><input class="rs-input rs-tag-input-input" id="project-tags" placeholder="Add a tag" /><button class="rs-btn-ghost rs-tag-input-add" type="button">Add</button></div></div>

Classes

.rs-tag-input.rs-tag-input-label.rs-tag-input-list.rs-tag-input-tag.rs-tag-input-remove.rs-tag-input-row.rs-tag-input-input.rs-tag-input-add.rs-tag-input-feedback

Depends on

/input /button /icons /field