React Aria Tag Components#
Three thin wrapper components — Tag, TagGroup, and TagList — that layer Phoenix's design-system styling on top of React Aria Components tag primitives to deliver accessible, keyboard-navigable tag selection UI.
Location & Exports#
| File | Export |
|---|---|
app/src/components/tag/Tag.tsx | Tag, TagProps |
app/src/components/tag/TagGroup.tsx | TagGroup, TagGroupProps |
app/src/components/tag/TagList.tsx | TagList, TagListProps |
All three are re-exported from the barrel file app/src/components/tag/index.tsx and from the top-level app/src/components/index.tsx via export * from "./tag".
Consumers can import directly from @phoenix/components.
Component Breakdown#
TagGroup#
Wraps AriaTagGroup from react-aria-components and applies fieldBaseCSS — the shared field base styles (label, input, description, and error text formatting) used across form-field components. All props are forwarded to the underlying React Aria component, which handles labeling, description, and error message accessibility wiring.
TagList#
Wraps AriaTagList and injects a local flexbox layout (display: flex; flex-wrap: wrap; gap: size-50; height: 28px). Implements TypeScript generics (T extends object) and preserves them across forwardRef via an explicit cast .
Tag#
Wraps AriaTag and adds styling for four states driven by React Aria's data attributes :
| State | Style |
|---|---|
| Default | Light border, small border-radius, text-900 color |
[data-hovered] | Darker border |
[data-focus-visible] | Primary-color outline with offset |
[data-selected] | Primary-color border + primary-700 background |
Relationship to the Token Component#
The Token component (app/src/components/token/Token.tsx) is a separate, custom-built implementation unrelated to these React Aria wrappers. Key distinctions:
- Token is a standalone "pill" optimized for removable or clickable items (
onPress,onRemove,leadingVisual,size, theme-aware LCH color theming). It manages its own interaction logic without React Aria's collection infrastructure. - Tag/TagGroup/TagList delegate all accessibility and selection-state management to React Aria and are designed to work inside React Aria collection patterns (keyboard navigation, multi-select, ARIA listbox semantics).
Use the React Aria components when you need collection-level keyboard navigation and ARIA semantics; use Token for standalone pill/badge UI.
Usage Status#
As of the current snapshot, Tag, TagGroup, and TagList are exported and available but have no active call sites in the Phoenix application code. They are available as foundational design-system building blocks for future feature work requiring accessible tag-selection UI.