shadcn.io is not affiliated with official shadcn/ui
Relationships CRUD Block for React Aria
A product's main category chosen from four radio rows and its tags as removable chips, with an Add a tag popover that searches the tags it lacks, offers to create a name that does not exist, refuses a duplicate, and an Undo for a removed chip.
Installation
Overview
Attach a record to the things it belongs to without a trip to a settings page, with these relationships for React with React Aria. A hairline frame with a plus mark on each corner names one product of Tieloom, a catalogue tool, Linen cushion, and gives it two relationships. The main category is one of four rows of native radios (one, the main shelf, with the others unchosen), and the tags are chips, each with a remove button, up to eight. Add a tag, the block's one Shine Button, opens a Popover with an Input that searches the tags the product does not have yet in a Listbox; Enter picks the top match. Type a name that does not exist and the list offers "Create tag outdoor", which makes the tag and attaches it in one step; type one the product already has and the line under the field says so, so a tag is never attached twice. Removing a chip leaves "Removed outdoor from Linen cushion" in the foot with an Undo that puts it back in place, and removing every chip shows an Empty state without the band changing height. The bands are ruled by Guides. For product catalogues, article editors, asset libraries and any record with a category and tags.
FAQ
How do I fill it with my own categories and tags?
Edit CATEGORIES (an id, a name and a hint) and TAGS (an id and a lowercase name), and START, the ids the product carries. The count, the chips, the list in the popover and the summary line are all derived from those, and tags created on the spot take their id from a counter held in state, never from the clock.
How does creating a tag work, and what is refused?
The popover lists the tags the product lacks that contain what you typed. If the name is new, valid and the product has room, one more line offers to create it. A name that already exists on the product is refused by name, a name over 20 characters or with characters other than letters, digits, spaces and hyphens is refused with its reason, and so is a ninth tag. The reason shows in a line under the field that is always there, and Enter on a refused name keeps the popover open.
How do I use it with the keyboard?
Add a tag opens the popover with focus in the search field. Type and press Enter to add the top match or create the typed name, or press Tab to move into the list and use the arrow keys and Enter. Escape closes the popover and returns focus to the button. After adding, focus moves to the new chip's remove button; after removing, to the next chip.
What does Undo restore?
The last removed tag, in the same position. Adding or creating a tag replaces the Undo, so it never reaches back further than what you see. Choosing a different category is not undone by it; the radios already show the last choice and can be changed back.
What stays local, and how do I wire a real save?
The category and the tags live in React state in this tab and a reload brings the original four back; nothing is sent. In your app call your API in attach, create, remove and pickCategory, take the tag from the response so the server owns its id and its spelling, and show a server refusal in the same line the popover already has.