Simplifying web development

React Tag Input

React Tag Input is a robust, minimal and performant input field for creating multiple tags. The component has the following features.

  • No dependencies
  • Lightweight, only 2.4kb gzipped
  • Edit existing tags directly
  • Easy to customize theme
  • Responsive to any screen size
  • Support for custom validator
  • Removes line breaks and formatting on paste
  • HTML injection blocked
  • Includes TypeScript definitions
  • Uses MIT license

Demo

john@example.com

Installation

Install the component via NPM package manager

BASH
npm install --save @pathofdev/react-tag-input

Import the compiled CSS in your bundle or copy the CSS file

JS
import "@pathofdev/react-tag-input/build/index.css";

You can also import that raw SCSS file and override the variables inside. See towards the bottom of this page for a more detailed example.

SCSS
@import "node_modules/@pathofdev/react-tag-input/src/styles/index.scss";

Usage

The simplest working example looks like this.

JSX
import React from "react";
import ReactDOM from "react-dom";
import ReactTagInput from "@pathofdev/react-tag-input";
import "@pathofdev/react-tag-input/build/index.css";
function App() {
const [tags, setTags] = React.useState(["example tag"])
return (
<ReactTagInput
tags={tags}
onChange={(newTags) => setTags(newTags)}
/>
)
}
const root = document.getElementById("root");
ReactDOM.render(<App/>, root);

Below is an example of usage with all the available options

JSX
<ReactTagInput
tags={tags}
placeholder="Type and press enter"
maxTags={10}
editable={true}
readOnly={false}
removeOnBackspace={true}
onChange={(newTags) => setTags(newTags)}
validator={(value) => {
// Don't actually validate e-mails this way
const isEmail = value.indexOf("@") !== -1;
if (!isEmail) {
alert("Please enter an e-mail address");
}
// Return boolean to indicate validity
return isEmail;
}}
/>

Component props

PropTypeRequiredDescription
tagsstring[]yesA string array containing a list of tags
onChangefunctionyesA function that receives the updated tags, used to update your state
placeholderstringnoThe placeholder for the inner input field, defaults to "Type and press enter"
maxTagsnumbernoSet the maximum number of tags allowed. Once reached, the inner input field will be hidden. Defaults to undefined which is unlimited
editablebooleannoIf enabled, a user can click a tag and change it's value directly. Defaults to false
readOnlybooleannoIf enabled, tags cannot be edited or removed and the inner input field is hidden. Defaults to false
removeOnBackspacebooleannoIf enabled, a user can delete a tag if they press backspace when focused on the inner input field or a specific tag input field. Defaults to false
validatorfunctionnoA function that receives a specific tag value that a user is attempting to add and returns a boolean indicating if it is valid. If invalid, the tag will not be added

Customizing style

The styling of this component consists of 5 different classes. You can override any of the styles using these 5 CSS classes.

CSS
.react-tag-input {} /* Wrapper */
.react-tag-input__input {} /* Inner input */
.react-tag-input__tag {} /* Tag wrapper */
.react-tag-input__tag__content {} /* The text content within the tag */
.react-tag-input__tag__remove {} /* The remove button & icon for a tag */

Font size

The entire component sets a base font-size of 1rem and uses the em unit for all child elements. This means that the component should adapt to your existing sizing by default. However, if you do need to modify its size, you can customize the font-size property on the wrapper and everything else will respond accordingly.

CSS
.react-tag-input {
font-size: 14px; /* specific font size */
font-size: 1.5rem; /* responsive font size */
}

If you need to set a specific font size for a particular area, simply target it with the appropriate CSS class.

CSS
.react-tag-input__input {
font-size: 14px;
}

Input height

I recommend customizing the input height using the font-size property on the wrapper. The advantage of this method is it scales all the inner components appropriately.

If you need the input to match a particular height you can set a height directly on the wrapper class. You may need to customize the inner components to match your new height.

CSS
.react-tag-input {
min-height: 50px;
}

Colors

All the colors of the component are easy to override. Here are all the specific color styles.

CSS
.react-tag-input {
background: white;
color: #333;
border: 1px solid #e1e1e1;
}
.react-tag-input__input {
background: transparent;
color: #333;
}
.react-tag-input__input::placeholder, .react-tag-input__input:-moz-placeholder, .react-tag-input__input:-ms-input-placeholder, .react-tag-input__input::-moz-placeholder, .react-tag-input__input::-webkit-input-placeholder {
color: #333; /* Input placeholder */
}
.react-tag-input__tag {
background: #e1e1e1;
}
.react-tag-input__tag__remove {
background: #d4d4d4;
}
.react-tag-input__tag__remove:before, .react-tag-input__tag__remove:after {
background: #333; /* X icon in remove button */
}

Overriding SCSS variables

The easiest way to customize the component styles is by importing the raw SCSS files and overriding the variables.

SCSS
// Override variables
$reactTagColorGray: #e1e1e1 !default;
$reactTagColorText: #333 !default;
$reactTagHeight: 2.375em !default;
$reactTagFontSize: 1em !default;
$reactTagBorderRadius: 3px !default;
$reactTagMarginPadding: 0.1875em !default;
// Import the SCSS file
@import "node_modules/@pathofdev/react-tag-input/src/styles/index.scss";

Contributing

Have any issues or suggestions? Create an issue on GitHub

If you would like to contribute to the development of this project, you need to:

  • Fork the GitHub repo
  • Make the required changes on your fork
  • Submit a pull request in the main repo comparing your fork

License

This project makes use of the MIT license