Is Tag Composer Input free for commercial use?

Yes. Tag Composer Input is MIT licensed, so you can use it in personal and commercial projects without attribution.

Is the tag input accessible and does it work with a screen reader?

Yes. The field is a real labelled input with described instructions and a polite live region for validation, and every chip is a real list item with a uniquely named Remove button. Backspace on an empty field, arrow keys between remove buttons and Escape all move focus predictably, and removing a chip never leaves focus stranded on the page body. With reduced motion enabled every add, remove and disclosure toggle is instant while the same keyboard and validation behaviour is preserved.

Can I change the chip colour, the field background or the animation?

Yes. Override --tag-composer-accent, --tag-composer-panel or --tag-composer-error from any ancestor to retheme the chips, the field shell and the validation state. The reflow spring stiffness, the new-chip entrance direction, the overflow threshold and the chip radius are all props, so you can retune the motion and geometry without editing the component.

Tag Composer Input

A free tag input for React that turns typed values into accessible, animated chips.

Customise

New-chip entrance

Visible before overflow8

Reflow stiffness420

Chip radius999px

Code

<InputTagComposer
  value={tags}
  onValueChange={setTags}
/>

Tag Composer Input is a free tag input react component for Next.js, React and Tailwind that turns typed values into controlled chips. A labelled text field creates a tag on Enter or comma, trimming and collapsing whitespace, and rejects empty, duplicate, over-length or over-limit attempts with a concise message instead of silently failing.

Every chip is a real list item with its own named remove button, so Backspace on an empty field, arrow keys between remove buttons, and Escape back to the field all work exactly as a keyboard user expects. Adding and removing a chip animates with a bounded Motion spring, tags beyond the visible limit stay reachable behind a keyboard-operable disclosure, and reduced motion makes every change instant while every other behaviour, including validation and focus, stays identical.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/input-tag-composer

Usage

"use client";

import { useState } from "react";
import { InputTagComposer } from "@/components/ui/input-tag-composer";

export default function Page() {
  const [tags, setTags] = useState<string[]>(["design-systems", "react"]);

  return (
    <InputTagComposer
      value={tags}
      onValueChange={setTags}
      label="Tags"
      placeholder="Add a tag"
    />
  );
}

Props

Prop	Type	Default	Description
value	ReadonlyArray<string>	required	Controlled, ordered set of tags.
onValueChange	(tags: string[]) => void	required	Receives the next normalised, ordered tags on every accepted change.
label	string	"Tags"	Visible field label, bound to the text input.
placeholder	string	"Add a tag"	Native input placeholder.
maxTags	number	8	Maximum number of tags. Clamped to 1 to 20.
maxLength	number	28	Maximum trimmed tag length. Clamped to 1 to 64.
separators	ReadonlyArray<"Enter" \| ",">	["Enter", ","]	Keys that create a tag from the current input value.
direction	"forward" \| "reverse"	"forward"	Entrance direction for a newly created chip only. Never affects ordering.
maxVisible	number	8	Visible chips before the overflow disclosure appears. Clamped to 3 to 20.
springStiffness	number	420	Chip reflow spring stiffness. Clamped to 160 to 640.
radius	number	999	Chip corner radius in CSS pixels. Clamped to 0 to 999.
className	string	undefined	Additional classes merged onto the field wrapper.

Customisation

Tag Composer Input exposes three Tier 3 CSS custom properties. Set --tag-composer-accent for the filled chip colour, --tag-composer-panel for the field shell background, and --tag-composer-error for the validation border and message colour. Every default resolves against the shared semantic tokens, so a vanilla shadcn install stays fully themed without any of the three being set explicitly.

.post-form {
  --tag-composer-accent: var(--color-accent-400, var(--primary));
  --tag-composer-panel: var(--card, var(--surface));
}

Frequently asked questions

Is Tag Composer Input free for commercial use?: Yes. Tag Composer Input is MIT licensed, so you can use it in personal and commercial projects without attribution.
Is the tag input accessible and does it work with a screen reader?: Yes. The field is a real labelled input with described instructions and a polite live region for validation, and every chip is a real list item with a uniquely named Remove button. Backspace on an empty field, arrow keys between remove buttons and Escape all move focus predictably, and removing a chip never leaves focus stranded on the page body. With reduced motion enabled every add, remove and disclosure toggle is instant while the same keyboard and validation behaviour is preserved.
Can I change the chip colour, the field background or the animation?: Yes. Override --tag-composer-accent, --tag-composer-panel or --tag-composer-error from any ancestor to retheme the chips, the field shell and the validation state. The reflow spring stiffness, the new-chip entrance direction, the overflow threshold and the chip radius are all props, so you can retune the motion and geometry without editing the component.

Related components

Want the full page this belongs to?Template Empire builds complete Next.js templates with this motion system throughout. Browse the paid templates that pair with these free components.Explore Template Empire templates