In my years of building large-scale React applications, I’ve often found that capturing user input for lists, like tags, keywords, or email recipients, can be a bit of a headache.
Standard text inputs just don’t offer the visual clarity or the “chips” experience that users in the US expect from modern web tools.
Recently, I started using the react-tag-input-component library, and it has significantly streamlined how I handle multi-value inputs.
In this tutorial, I will show you exactly how to integrate and master this component in your own React applications.
Why Use react-tag-input-component?
When you are building an application for a tech-savvy audience, the user interface needs to feel snappy and intuitive.
I prefer this specific library because it is lightweight, supports TypeScript out of the box, and doesn’t come with a lot of “bloat” that slows down performance.
It effectively turns a simple comma-separated string of text into a beautiful collection of tags that users can easily add or remove.
Set Up the React Environment
Before we dive into the code, we need to ensure our project environment is ready. I’ll assume you have a React project running.
You can install the library using npm or yarn. I personally use npm for most of my enterprise projects.
Run the following command in your terminal:
npm install react-tag-input-componentOnce installed, we are ready to start implementing the component in our views.
Method 1: Basic Implementation with US Zip Codes
One of the most common use cases I encounter is allowing users to filter data by multiple locations or Zip Codes.
In this example, I will show you how to set up a basic tag input field that allows a user to enter multiple US Zip Codes.
import React, { useState } from "react";
import { TagsInput } from "react-tag-input-component";
const ZipCodeSelector = () => {
const [selected, setSelected] = useState(["90210", "10001"]);
return (
<div style={{ padding: "20px", maxWidth: "500px" }}>
<h3>Enter Service Area Zip Codes</h3>
<TagsInput
value={selected}
onChange={setSelected}
name="zips"
placeHolder="Enter Zip Code"
/>
<div style={{ marginTop: "15px" }}>
<strong>Current Selection:</strong>
<ul>
{selected.map((zip) => (
<li key={zip}>{zip}</li>
))}
</ul>
</div>
</div>
);
};
export default ZipCodeSelector;You can refer to the screenshot below to see the output.
In this setup, I used useState to manage the array of strings. Every time a user presses “Enter,” the onChange function updates the state.
I’ve found that providing a placeHolder is essential for the US market to guide the user on what specific format is expected.
Method 2: Handle Professional Skills for a Job Board
I recently worked on a recruitment platform based in New York, where candidates needed to list their technical skills.
Using the react-tag-input-component made the profile creation page look much more professional than a standard text area.
Here is the full code for a skills-based implementation:
import React, { useState } from "react";
import { TagsInput } from "react-tag-input-component";
import "./App.css"; // Ensure you import CSS to style the tags
const CareerSkillsInput = () => {
const [skills, setSkills] = useState(["React", "Node.js", "AWS"]);
const handleSkillsChange = (newSkills) => {
setSkills(newSkills);
};
return (
<div className="container" style={{ margin: "40px" }}>
<h2>Candidate Professional Skills</h2>
<p>Press enter to add a skill relevant to US Tech Industry standards.</p>
<TagsInput
value={skills}
onChange={handleSkillsChange}
name="skills"
placeHolder="e.g. Python, SQL, Azure"
/>
<div style={{ marginTop: "20px", color: "#555" }}>
<span>Total Skills Added: {skills.length}</span>
</div>
</div>
);
};
export default CareerSkillsInput;You can refer to the screenshot below to see the output.
When implementing this, I noticed that users appreciate seeing a count of how many items they have added, especially when there is a limit.
Method 3: Customize Separators for US Phone Area Codes
Sometimes, users want to paste a list from a spreadsheet or a document. By default, this component uses the “Enter” key.
However, you can customize the behavior. Suppose we want to capture a list of US Area Codes and allow the user to use the “Space” bar or “Comma” as a separator.
import React, { useState } from "react";
import { TagsInput } from "react-tag-input-component";
const AreaCodeInput = () => {
const [areaCodes, setAreaCodes] = useState(["212", "310", "415"]);
return (
<div style={{ padding: "30px" }}>
<h2>Target Area Codes (NYC, LA, SF)</h2>
<TagsInput
value={areaCodes}
onChange={setAreaCodes}
name="areaCodes"
placeHolder="Add Area Code"
separators={["Enter", ","]}
/>
<p style={{ fontSize: "12px", color: "gray" }}>
Tip: You can press Enter or use a Comma to separate codes.
</p>
<div style={{ background: "#f4f4f4", padding: "10px", marginTop: "10px" }}>
<code>{JSON.stringify(areaCodes)}</code>
</div>
</div>
);
};
export default AreaCodeInput;You can refer to the screenshot below to see the output.
Using the separators prop is a pro-tip I always share with my team. It makes the data entry process much faster for power users.
Style the Tag Component
One common question I get is how to make the tags match a specific brand identity, like a US-based corporate theme.
The react-tag-input-component uses standard CSS classes that you can override in your global stylesheet.
The main classes you will want to target are:
.rti--container: The main wrapper..rti--tag: The individual tag element..rti--input: The actual text input field.
Here is a CSS snippet I often use to give it a modern, “Bootstrap-like” feel:
.rti--container {
border: 2px solid #007bff !important;
border-radius: 8px !important;
padding: 5px !important;
}
.rti--tag {
background-color: #007bff !important;
color: white !important;
border-radius: 4px !important;
}
.rti--tag button {
color: white !important;
}Advanced Usage: Prevent Duplicates and Validation
In a real-world scenario, you don’t want users to enter the same tag twice.
While the library handles basic duplication, I often add a layer of validation to ensure the data matches specific US formats (like checking if a Zip Code is exactly 5 digits).
import React, { useState } from "react";
import { TagsInput } from "react-tag-input-component";
const ValidatedTags = () => {
const [tags, setTags] = useState(["Marketing"]);
const [error, setError] = useState("");
const handleChange = (newTags) => {
// Custom validation logic
const lastAdded = newTags[newTags.length - 1];
if (lastAdded && lastAdded.length > 15) {
setError("Tag is too long! Keep it under 15 characters.");
return;
}
setError("");
setTags(newTags);
};
return (
<div style={{ padding: "20px" }}>
<h2>Department Keywords</h2>
<TagsInput
value={tags}
onChange={handleChange}
placeHolder="Add department..."
/>
{error && <p style={{ color: "red" }}>{error}</p>}
</div>
);
};
export default ValidatedTags;Adding these small UX touches is what separates a junior developer from an experienced lead.
Common Troubleshooting Tips
Throughout my career, I’ve seen developers struggle with two main things when using this component.
First, ensure your value prop is always an array. Passing a null or undefined value will cause the component to crash.
Second, remember that the component is “controlled.” This means you must update the state via onChange for the UI to reflect changes.
If you find the tags aren’t appearing, check if your CSS is being blocked or overwritten by a parent container’s overflow: hidden property.
Conclusion
Using react-tag-input-component is a straightforward way to improve the user experience of your React forms.
It handles the complex logic of tag creation and deletion so you can focus on your application’s core features.
I’ve found that this library is robust enough for most US-based enterprise applications while remaining simple to style.
You may read:
- How to Get Component Height in React
- React Component Props with TypeScript
- Component-Based Architecture in React
- How to Use React Select Component
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
