Tag Input

Tag Input for a useful, keyboard-friendly product interface.

Make it yours.

Install the editable source and its dependencies into your React + Tailwind project.

Scroll horizontally for long lines

pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/tag-input.json

Use it

Scroll horizontally for long lines

"use client";
import {TagInput} from '@/components/jez-ui/ui/tag-input';

export default function Example(){

return <><div className="w-full max-w-sm"><div className="mb-7"><h3 className="text-2xl tracking-tight">A little more organised.</h3><p className="mt-2 text-sm leading-relaxed text-muted-foreground">Give your next idea a few useful labels.</p></div><TagInput defaultValue={['Design','Play']}/></div></>;
}

Props & types

Scroll horizontally for long lines

{
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
  label?: string;
  className?: string;
}

Source

View 3 source files

registry/ui/tag-input.tsx

Scroll horizontally for long lines

"use client";
import * as React from "react";
import { cn } from "./utils";
import { useControllable } from "./use-controllable";
export function TagInput({
  value,
  defaultValue = [],
  onValueChange,
  label = "Tags",
  className,
}: {
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
  label?: string;
  className?: string;
}) {
  const [tags, setTags] = useControllable(value, defaultValue, onValueChange);
  const [text, setText] = React.useState("");
  const id = React.useId();
  return (
    <div className={cn("grid gap-2", className)}>
      <label htmlFor={id} className="text-sm">
        {label}
      </label>
      <div className="flex flex-wrap gap-2 rounded-xl border border-border p-2">
        {tags.map((t) => (
          <span
            key={t}
            className="flex items-center gap-2 rounded-md bg-muted px-2 py-1 text-sm"
          >
            {t}
            <button
              aria-label={`Remove ${t}`}
              onClick={() => setTags(tags.filter((v) => v !== t))}
            >
              ×
            </button>
          </span>
        ))}
        <input
          id={id}
          className="min-w-20 flex-1 bg-transparent p-1 text-sm outline-none"
          value={text}
          placeholder="Type and press Enter"
          onChange={(e) => setText(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" || e.key === ",") {
              e.preventDefault();
              const t = text.trim();
              if (t && !tags.includes(t)) setTags([...tags, t]);
              setText("");
            }
            if (e.key === "Backspace" && !text) setTags(tags.slice(0, -1));
          }}
        />
      </div>
    </div>
  );
}

registry/ui/utils.ts

Scroll horizontally for long lines

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
  return twMerge(clsx(values));
}

registry/ui/use-controllable.ts

Scroll horizontally for long lines

"use client";
import { useState } from "react";
export function useControllable<T>(
  value: T | undefined,
  initial: T,
  onChange?: (value: T) => void,
) {
  const [local, setLocal] = useState(initial);
  return [
    value === undefined ? local : value,
    (next: T) => {
      if (value === undefined) setLocal(next);
      onChange?.(next);
    },
  ] as const;
}

Dependencies

clsx@2.1.1 · tailwind-merge@3.5.0

Accessibility & behaviour

Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.

Read the accessibility and performance guide →