Tag Input

Type free-text tags; Enter or a comma adds one, and pasting a list adds them all.

$ pnpm dlx shadcn@latest add https://dashral.com/r/tag-input.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/tag-input.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/tag-input

Usage

example.tsx

1import { TagInput } from "@/components/dashral/tag-input"
2
3<TagInput label="Tags" defaultValue={["design", "frontend"]} maxTags={5} />

Examples

With validation

validate refuses a tag with a message, e.g. anything that isn't an email.

Invite by email

liam@acme.com

Paste a list — commas, spaces and semicolons all split it.

Skills with suggestions

Type your own or pick a popular one; picked suggestions leave the list, and the limit is counted.

Required skills2 of 8

React
TypeScript

Press Enter or a comma after each one.

Popular for frontend roles

API reference

TagInput

Also takes every prop of <input>(opens in a new tab).

Prop	Type	Default
`value / defaultValue`	`string[]` Controlled or initial tags.	`[]`
`onValueChange`	`(value: string[]) => void` Called with the new value.	—
`maxTags`	`number` At most this many.	—
`validate`	`(tag: string) => string \| null` Return a message to refuse a tag.	—
`separators`	`string[]` Characters that finish a tag (Enter always does); pasted text is split on them.	`[","]`
`placeholder`	`string`	`"Add a tag…"`
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`classNames`	`{ root, label, description, error, box }` Classes for each part.	—

Keyboard

Keys	Action
`Enter`or`Comma`	Add what's typed
`Backspace`	In the empty field: take the last tag back to edit it
`Tab`	Reach each tag's remove button

Accessibility

Tags are a labelled list; remove buttons name their tag; a refused tag's message is an alert linked to the field.