JollyUI
  1. Docs
  2. components
  3. TagGroup

TagGroup

A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.

A static tag list can be built using <ul> or <ol> HTML elements, but does not support any user interactions. HTML lists are meant for static content, rather than lists with rich interactions such as keyboard navigation, item selection, removal, etc. TagGroup helps achieve accessible and interactive tag list components that can be styled as needed.

Categories
News
Travel
Gaming
Shopping

Installation

npx shadcn@latest add https://jollyui.dev/default/tag-group

Composed Components

A TagGroup uses the following components, which may also be used standalone or reused in other components.

Button

A button allows a user to perform an action, with mouse, touch, and keyboard interactions.

Label

A label provides context for an element.

Reusable Wrapper - Example

If you will use a TagGroup in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.

The installed file includes a reusable wrapper JollyTagGroup. This wrapper serves as an excellent starting point for use throughout your codebase.

Ice cream flavor
Chocolate
Mint
Strawberry
Vanilla

The JollyTagGroup component extends the props of React Aria TagGroup and TagList, and adds:

PropTypeDefaultDescription
labelstring | undefinedundefinedLabel for the tag group
descriptionstring | undefinedundefinedDescription text for the tag group
errorMessagestring | undefinedundefinedError message to display
itemsIterable<T> | undefinedundefinedItems to display in the tag group
childrenReact.ReactNode | ((item: T) => React.ReactNode)RequiredContent for the tags
renderEmptyState(() => React.ReactNode) | undefinedundefinedFunction to render content when there are no tags

You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.

Examples

Basic

Categories
News
Travel
Gaming
Shopping

Removing Tags

Categories
News
Travel
Gaming
Shopping

Selection

Amenities
Laundry
Fitness center
Parking
Swimming pool
Breakfast
Links
Adobe
Apple
Google
Microsoft

Client Side Routing

The <Tag> component works with frameworks and client side routers like Next.js, Remix and React Router. As with other React Aria components that support links, this works via the RouterProvider component at the root of your app. See the client side routing guide to learn how to set this up.

Disabled Tags

Sandwich contents
Lettuce
Tomato
Cheese
Tuna Salad
Egg Salad
Ham

In dynamic collections, it may be more convenient to use the disabledKeys prop at the TagGroup level instead of isDisabled on individual tags. Each key in this list corresponds with the id prop passed to the Tag component, or automatically derived from the values passed to the items prop (see the Collections for more details). A tag is considered disabled if its id exists in disabledKeys or if it has isDisabled.

Categories
News
Travel
Gaming
Shopping

Empty State

Categories
No categories.

Help Text

Description

Categories
News
Travel
Gaming
Shopping
Your selected categories.

Error Message

Categories
News
Travel
Gaming
Shopping
Invalid set of categories.