88 / Controls

Tag Input

An input that turns what you typed into a removable tag, and gives the last one back when you press backspace on an empty field.

Source

designtypescript

Enter or a comma adds one. Backspace on an empty field takes the last one back.

"use client"

import * as React from "react"
import { TagInput } from "mischief-ui/tag-input"

export function TagInputDemo() {
  const [tags, setTags] = React.useState(["design", "typescript"])

  return (
    <div className="w-full max-w-md">
      <TagInput
        value={tags}
        onChange={setTags}
        max={6}
        label="Topics"
        placeholder="Add a topic"
      />
      <p className="text-muted-foreground mt-2 text-xs">
        Enter or a comma adds one. Backspace on an empty field takes the last
        one back.
      </p>
    </div>
  )
}

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/tag-input

import { TagInput } from "mischief-ui/tag-input"

Also installs

lucide-react

Or paste it in yourself. The source imports the shared cn helper from @/lib/utils, so point that at your own copy.

registry/default/tag-input/tag-input.tsx

1"use client"2 3import * as React from "react"4import { X } from "lucide-react"5import { cn } from "@/lib/utils"6 7export type TagInputProps = Omit<8  React.HTMLAttributes<HTMLDivElement>,9  "onChange" | "defaultValue"10> & {11  value?: readonly string[]12  defaultValue?: readonly string[]13  onChange?: (tags: string[]) => void14  placeholder?: string

Usage

export function Topics() {
  const [tags, setTags] = React.useState(["design"])

  return <TagInput value={tags} onChange={setTags} max={6} label="Topics" />
}

Every change is said

Adding a tag, removing one, and being refused a duplicate are all announced in a polite live region. Without that, a reader using a screen reader presses Enter and hears nothing, which is indistinguishable from the field being broken.

Each remove control is named with the tag it removes rather than being six identical buttons called Remove.

The habits it expects

Enter or a comma ends a tag. Whitespace around it is trimmed.
Backspace on an empty field takes the last tag back, so overshooting is recoverable without reaching for the pointer.
Leaving the field commits whatever was half typed, rather than throwing it away.
A duplicate clears the field and says so, instead of silently doing nothing.

API

valuestring[]Controlled tags.

defaultValuestring[]Uncontrolled starting tags.

onChange(tags: string[]) => voidThe tags after a change.

placeholderstringShown in the empty field.

separatorsstring[]Keys that end a tag, besides Enter. Defaults to [",", "Enter"].

maxnumberMost tags allowed. The field closes once reached.

allowDuplicatesbooleanWhether the same tag may be added twice. Off by default.

labelstringNames the field. Defaults to "Tags".

Accessibility

The field is labelled, described by its status region, and every change is announced politely. Remove controls name their own tag. Clicking the surrounding box focuses the field, and the whole control shows a focus ring when anything inside it has focus.