token input

Tag/Token Input

Tag / Token Input

Input that turns text into removable tags/chips.

Preview

react
shadcn

Features

  • Enter/comma to create tags.
  • Backspace to remove last token.
  • Duplicate prevention.

Installation

npx shadcn@latest add https://www.shadcn-form.com/registry/token-input.json

Registry JSON: /registry/token-input.json

Usage

import { TokenInput } from '@/components/ui/token-input'
<TokenInput value={tokens} onChange={setTokens} />