shadcn.io is not affiliated with official shadcn/ui
Tag Input Form Block for React
A tags field that cleans every tag it takes (trimmed, lower case, no repeats), splits a pasted list and shows what was pasted next to what was added.
Installation
Overview
Tag a link, and let the field tidy the tags for you, with this tag input form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner, in bands. The first shows the link being tagged. The second is a Tags Input: Enter, a comma or a semicolon ends a tag, and every tag arrives cleaned by three rules written under the field in words (spaces at the ends are trimmed and kept to one inside, capitals become lower case, a tag already there is merged, never repeated). A tag is edited in place by a double click, or by moving onto it with the arrow keys and pressing Enter, Backspace at the start selects the last tag and a second one removes it, a ninth tag is refused in words and Sort A to Z orders the list. Pasting a list is split on commas, semicolons and line breaks and cleaned the same way; the third band, "Last paste", shows what was pasted next to what was added and a sentence such as "Added 3, merged 2 duplicates", and a button pastes a messy sample for anyone without a clipboard to hand. It's built from Tags Input, Button, Badge, Shine Button and Guides, with a CSS entrance only. For bookmarks, notes, posts and any record with free-form labels.
FAQ
Where are the cleaning rules, and how do I change them?
clean is one function: it trims, collapses runs of spaces and lower-cases. The field gets it as sanitizeValue, so every tag typed by hand goes through it, and tidy applies it to a whole list after an edit or a paste, dropping empties and repeats. Change clean (to keep case, say) and the three lines under the field, and everything follows.
How does pasting work, and what does it say?
A paste handler on the field splits the text on SPLIT (commas, semicolons and line breaks), cleans each part and adds what is new, up to the limit of eight. It then says what happened ("Added 3, merged 2 duplicates." or "Added 3, 2 over the 8 limit.") in the foot and in the Last paste band, next to the text that was pasted. A paste with no separator is left to the field as one tag. Nothing is read from the clipboard except what is pasted.
How does it work from the keyboard?
Type and press Enter, a comma or a semicolon. With the cursor at the start of an empty box, the arrow key toward the tags moves onto the last one, Enter edits it in place (Enter saves and Escape cancels) and Backspace selects, then removes, it. In a right-to-left page that arrow is the other one. The field is the same on every library and is named by its label, "Tags". It also announces each tag added, edited or removed on its own live region.
What happens when a tag can't be added?
A repeat typed by hand ("reading is already a tag.") and a ninth tag ("8 tags is the most: remove one first.") are refused in words, with a warning icon under the field and the same sentence in the foot; the field keeps what was typed so it can be corrected. Saving with no tags says "Not saved. Add at least one tag." and moves focus to the field.
What stays local, and how do I connect it for real?
Nothing is saved: Save tags says "5 tags kept in this demo. Nothing was saved." and a repeat press says there are no changes. Replace the body of submit with a call that stores the list, and clean again on the server. With react-hook-form or TanStack Form the value is an array of strings; pass tidy as the transform so the server and the form agree.
Related
- Pro
Multi Select Skills Form
SelectsA combobox that holds up to five of eighteen skills as chips inside the field, says its limit in words and refuses a sixth, and counts the open projects the skills cover.
- Pro
Search Input with Recent Searches Form
Text fieldsA catalogue search form with a clear button, a slash shortcut, Escape to clear, results marked as matches in a held-height region, an empty state with a way back and recent searches as removable chips.
- Pro
URL Input with Paste Cleanup Form
Text fieldsA website field with a fixed https:// in front that cleans what you paste, then reads the address with the browser's URL parser into Host, Path and Secure cells.
- Pro
A combobox of 24 regions that narrows as you type, marks the letters that match, counts the matches and spells out the chosen region, with its facts in a side cell.
- Pro
Text Input with Address Preview Form
Text fieldsA form panel with one required project-name field that shows the web address it will get as you type, flags a name that is taken or past 50 characters, and offers the next free address.
- Pro
Email and Password Form
Text fieldsThe sign-in pair done well: an email named for password managers, a password with a reveal button and a Caps Lock warning, one generic failure that never says which half was wrong, and a quiet band with the demo account.