Tag Composer React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import TagComposer from "./TagComposer";

export default function Example() {
  return (
    <TagComposer
      defaultValue={[
        "Typography",
        "Motion"
      ]}
      label={"Project tags"}
      placeholder={"Add a tag"}
      maxTags={6}
      color={"#a8bec7"}
      disabled={false}
    />
  );
}

Using Tag Composer

Press Enter or a comma to add a trimmed tag. Exact duplicates are ignored, and composition input is left alone until the composition is complete.

Backspace on an empty input removes the last tag and Escape clears the draft. Use value and onValueChange for controlled state; maxTags stops additions while keeping existing tags removable.

Props

Name	Type	Required	Default	Description
value	string[]	No	undefined	Controlled list of tags.
defaultValue	string[]	No	[]	Initial uncontrolled tags.
onValueChange	function	No	undefined	Receives the complete next tag list.
label	string	No	"Tags"	Visible input label.
placeholder	string	No	"Add a tag"	Placeholder while more tags can be added.
removeLabel	function	No	undefined	Receives a tag and returns its remove-button label.
maxTags	number	No	8	Maximum tag count, with a minimum of one.
disabled	boolean	No	false	Disable input and removal.
color	string	No	"#a8bec7"	Accent and focus colour.
name	string	No	undefined	Optional repeated hidden field name for form submission.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.