React component for creating tags with ease, styled using Tailwind CSS.
🍃 Lightweight
🛠 Styled with Tailwind
⌨️ Add tags with Enter / Tab
🗑️ Use Backspace to remove last tag
🚦 Set maximum number of tags allowed
Download the tags-input.tsx file and add it to your project directory.
If using Next.js, first:
'use client';Then:
import React, { useState } from 'react'; import { TagsInput } from '@/components/ui/tags-input'; // Modify to import from where you stored the file export default function TagSelector() { const [selected, setSelected] = useState(['Dragonfruit']); return ( <div className=''> <div className=''> Fruits: <div>{JSON.stringify(selected)}</div> </div> <TagsInput value={selected} onChange={setSelected} name='fruits' placeHolder='Enter Fruits' maxTagsCount={3} /> <div className='text-neutral-400'> Enter fruit and press Enter/Tab </div> </div> ); }| Prop | Description | Type | Default |
|---|---|---|---|
name | Value for name of input | string | - |
placeholder | Placeholder for text input | string | - |
value | Initial tags | string[] | [] |
onChange | onChange callback (added/removed) | string[] | - |
onKeyUp | Input onKeyUp callback | event | - |
onBlur | Input onBlur callback | event | - |
separators | When to add tag | string[] | ["Enter", "Tab"] |
removers | Remove last tag if textbox empty and Backspace is pressed | string[] | ["Backspace"] |
onExisting | If tag is already added then callback | (tag: string) => void | - |
onRemoved | On tag removed callback | (tag: string) => void | - |
beforeAddValidate | Custom validation before adding tag | (tag: string, existingTags: string[]) => boolean | - |
isEditOnRemove | Remove the tag but keep the word in the input to edit it | boolean | false |
maxTagsCount | Maximum number of tags the user is allowed to add | number | - |
This project is a modified version of react-tag-input-component created by hc-oss. Check out the original repository here.
MIT