Tags Input
A chips-in-input control: type and press Enter or comma to create a tag, paste a delimited list to add several, and remove tags with the X or Backspace.
$
Registry itembunx shadcn@latest add @nx-ui/tags-inputCover-crop species
Create a tag on Enter or comma; Backspace at the start removes the last tag.
Sizes
Disabled & invalid
The underlying tag
The removable Tag primitive, also used for filter chips and selected values.
DefaultVerifiedPendingMovements12RemovableOrganisation3
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
size | keyof typeof sizes | "md" | — |
placeholder | string | — | — |
value | string[] | — | Controlled value: array of tag strings. |
defaultValue | string[] | — | Default tags for uncontrolled mode. |
onValueChange | (tags: string[]) => void | — | Called whenever the committed tag array changes. |
max | number | — | Maximum number of tags; further input is ignored once reached. |
allowDuplicates | boolean | false | Allow duplicate tag values (default false). |
disabled | boolean | — | — |
validate | (value: string) => boolean | — | Return false to reject a candidate tag. |
delimiters | string[] | [",", "Enter"] | Keys/characters that commit the current text as a tag. |
…extends Omit<React.ComponentProps<"div">, "onChange">