ComponentsCore

Tag Group

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

Example

Features

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.

  • Keyboard navigation – Tags can be navigated using the arrow keys, along with page up/down, home/end, etc.
  • Removable – Tags can be removed from the tag group by clicking a remove button or pressing the backspace key.
  • Item selection – Single or multiple selection, with support for disabled items and both toggle and replace selection behaviors.
  • Accessible – Follows the ARIA grid pattern, with additional selection announcements via an ARIA live region. Extensively tested across many devices and assistive technologies to ensure announcements and behaviors are consistent.
  • Styleable – Items include builtin states for styling, such as hover, press, focus, selected, and disabled.

Installation

Field

The Field component is fundamental and used by many other components. It applies consistent, reusable styles and appears in inputs, labels, descriptions, and other related elements.

Install following dependencies:

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Add composeTailwindRenderProps helper using cn and composeRenderProps from react-aria-components for conditional class rendering.

lib/render-props.ts

Copy and paste the following code into your project.

components/ui/core/tag-group.tsx
npx @libravelui@latest add tag-group

Anatomy

import { Tag, TagGroup, TagList } from "@/components/ui/core/tag-group";
<TagGroup>
  <TagList items={items}>{(item) => <Tag>{item.name}</Tag>}</TagList>
</TagGroup>

Another Examples

Can be Closed

Allow users to remove individual tags by closing them. This feature is useful for managing selections or dynamically updating lists without reloading the page.

Controlled

Manage tag selection and removal through external state, giving developers full control over tag behavior and interactions within the application.

Edit on GitHub

Table

A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.

Tree

A tree provides users with a way to navigate nested hierarchical information, with support for keyboard navigation and selection.