shadcn.io is not affiliated with official shadcn/ui
Tag Taxonomy Comments Block for Vue
Hierarchical tags as nested checkboxes with mixed parent states and derived counts, an Any or All match switch, and tagged feedback comments with an empty state that names the combination.
Installation
Overview
Tag feedback in groups and find it again with this tag taxonomy for Vue with Ark UI. A compact header names the board, and one hairline frame holds ten tagged comments beside a tree of tags: Product (Billing, Invoices, Onboarding) and Support (Bug, Question). The tags are nested native checkboxes drawn in the foreground colour. A parent shows the mixed state when some of its tags are ticked, and pressing it ticks or clears all of them. Every count is derived: the comments with that tag, or with any tag inside a group. A Segment Group chooses whether a comment needs any of the ticked tags or all of them, and "Clear filters" resets. The results sit in a held scroll region with Badge tags, and an Empty state names the combination when nothing carries it. On a phone the tags sit above the results in their own scroll area. For feedback boards, support desks and any place where tags have parents.
FAQ
How do I fill it with my own tags and comments?
Edit GROUPS (a group with its tags) and REMARKS (the author, the words and the tag ids it carries), plus PEOPLE. The groups are two levels deep; deeper nesting needs another level in GroupRow. Counts and the mixed state are derived from the tag ids, so nothing else is typed twice.
What does a parent checkbox do?
It stands for all of its tags. It is checked when every tag is ticked, mixed when some are, and empty when none are. Pressing it ticks all of its tags when it was empty or mixed, and clears them when it was checked. Comments are tagged with the tags themselves, never with the group.
What do Any and All mean?
Any shows a comment with at least one ticked tag; All shows a comment with every ticked tag. Ticking a whole group under All therefore asks for a comment carrying all its tags, which is often nothing, and the empty state says so and suggests Any.
What stays local?
The ticks and the match mode live in the page, and the comments are a typed list. To make it real, filter on the server with the tag ids and send counts with the tree, so they do not depend on the page of results you loaded.
Is it accessible?
Every tag is a native checkbox with its name and count in the label, and the mixed state is a real indeterminate state that assistive technology reads as such. The match switch is a labelled radio group, the results are a labelled scroll region, and each change is read out in the polite status line.