Tags Input

Free

Allow users to add multiple tags with validation, duplicate detection, and customizable styling.

Installation

Install via CLI

moonui add tags-input

Usage

React
Next.js

Examples

Basic Usage

Simple tags input with add and remove functionality

With Initial Tags

Pre-populated tags input

React
TypeScript
Next.js

With Max Tags Limit

Limit the number of tags that can be added

Important
Urgent

2/5 tags used

Different Variants

Various visual styles for different contexts

Default
Secondary
Destructive
Outline

Form Example

Tags input integrated in a form

User Profile

Add your skills and interests

Add up to 10 skills