Tag Input

A flexible, accessible tag input component that allows users to add and remove items with keyboard support. Ideal for collecting multiple inputs like skills, keywords, email addresses, or any list-based data in a modern, user-friendly interface.

react
typescript
tailwind
1"use client";
2
3import { useState } from "react";
4import { TagInput } from "@/components/tag-input";
5
6export function TagInputPreview() {
7const [tags, setTags] = useState<string[]>(['react', 'typescript', 'tailwind']);
8
9return (
10
11<div className="w-full max-w-sm mx-auto">
12<TagInput
13  label="Skills"
14  placeholder="Add a skill..."
15  value={tags}
16  onChange={setTags}
17/>
18</div>
19); }

Installation

Run the following command to add the component:

npx cx add tag-input

Basic Usage

Added: None
1"use client";
2
3import { useState } from "react";
4import { TagInput } from "@/components/tag-input";
5
6export function TagInputBasic() {
7const [tags, setTags] = useState<string[]>([]);
8
9return (
10
11<div className="w-full max-w-sm space-y-4">
12<TagInput
13  label="Technologies"
14  placeholder="Type and press Enter..."
15  value={tags}
16  onChange={setTags}
17/>
18<div className="text-sm text-muted-foreground">
19  Added: {tags.length > 0 ? tags.join(", ") : "None"}
20</div>
21</div>
22); }

Multiple Tag Inputs

React
Vue
Design
Music
1"use client";
2
3import { useState } from "react";
4import { TagInput } from "@/components/tag-input";
5
6export function TagInputMultiple() {
7const [skills, setSkills] = useState<string[]>(['React', 'Vue']);
8const [interests, setInterests] = useState<string[]>(['Design', 'Music']);
9
10return (
11
12<div className="w-full max-w-sm space-y-6">
13<TagInput
14  label="Technical Skills"
15  placeholder="Add a skill..."
16  value={skills}
17  onChange={setSkills}
18/>
19<TagInput
20  label="Interests"
21  placeholder="Add an interest..."
22  value={interests}
23  onChange={setInterests}
24/>
25</div>
26); }