Tailwind Input Tag Component

tuffstuff9
3

Styled & lightweight react component for tag(s) input

#component #input #input-tag #input-tags #lightweight #react #react-component #tag #tag-component #tailwind

Tailwind Input Tag Component 🏷️

React component for creating tags with ease, styled using Tailwind CSS.

✨ Features

🍃 Lightweight
🛠 Styled with Tailwind
⌨️ Add tags with Enter / Tab
🗑️ Use Backspace to remove last tag
🚦 Set maximum number of tags allowed

Installation

Download the tags-input.tsx file and add it to your project directory.

Usage

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>
    );
}

📌 Props

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	-

Credits

This project is a modified version of react-tag-input-component created by hc-oss. Check out the original repository here.

📜 License

MIT

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce