components/ui/lumen/controls/tag-input.tsx

The source ships with Pro.

The preview above is the real component. Its source installs into your repo with one command once you own it.

78 more Pro pieces in Lumen HaloEvery story chart, block and screen in the same language. Previews are live for everyone; the code comes with Pro.See the plans

Tag InputProv1.0.0

Words as chips in one field: Enter or a comma adds, a pasted list adds each item, Backspace removes the last, each chip has its own remove button. Duplicates and anything past max are refused out loud, not silently dropped.

Built on shadcn/ui

.md

Add to your project

pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-tag-input

Needs your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.

Customize

Try Lumen in your brand. The preview follows on every page; copy the CSS when it's right.

Accent

Corners

Font

/* Lumen as drawn: nothing to change. */

Props

value / defaultValue / onValueChange–
string[]
The tags.
max–
number
At most this many; the field says so when full.
placeholder / disabled / id / aria-label–
…
As an input.

Anatomy

Written once in the shared core and generated for each system.
Its maths (parsing, clamping, strength) is plain and tested in core/lib/fields.
Drawn on Lumen's field surface and focus ring.

TagInputdata-slot="tag-input"
The field.

Part of

Tag Input is part of

Get it with any of these. Pro pieces are not sold one at a time.

Lumen HaloSystem · 121 piecesIncluded in All-Access
All-Access LifetimeEvery system and pack, up to 10 developers$79 launch price

Compare options

Changelog

v1.0.0 · 2026-09-30All 1 entries

v1.0.0 · 2026-09-30
First release

Keyboard

Enter / ,: Add
Backspace (empty field): Remove the last

More in Inputs

Input

Input Group

Textarea