HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Menubar
  • Meter
  • Multi Select
  • Native Select
  • Navigation Menu
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature
  • Skeleton
  • Slider
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

Tag Input

PreviousNext

Type and press Enter or a comma to add tags. Tags are removable Badges, a pasted list splits, and suggestions show as you type.

Base UIReact AriaRadix UI
SoftwareGST

Press Enter or a comma to add. Up to 6 tags.

evita@vwork.digital

Paste a list to add several at once.

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/tag-input.json

Usage#

import { TagInput } from "@/components/ui/tag-input"
<TagInput value={tags} onValueChange={setTags} placeholder="Add a tag" />
 
<TagInput
  value={tags}
  onValueChange={setTags}
  suggestions={["Travel", "Meals", "Software"]}
  max={6}
/>

Keys#

  • Enter or comma adds what you typed. With suggestions open, Enter picks the highlighted one.
  • Backspace in an empty field removes the last tag.
  • Paste a list split by commas, tabs or new lines to add each one.

Validation#

A duplicate, a tag that fails validate, or one past max is turned away. The field turns invalid and shakes with the shared error motion, and onReject gets the reason so you can show it in a FieldError.

Props#

  • value, defaultValue and onValueChange hold the list of tags.
  • max caps the number of tags.
  • suggestions shows a filtered list in a Popover as you type.
  • validate returns false or a message to reject a tag. onReject receives the tag and the reason.
  • caseSensitive treats "GST" and "gst" as different tags. It is off by default.
  • name adds one hidden input per tag for plain forms.
TabsTerminal

On This Page

InstallationUsageKeysValidationProps