HQReact UI
DocsThemes
  • Getting Started
  • Introduction
  • Installation
  • Client Side Routing
  • MCP Server
  • LLMs
  • Framework Guides
  • Nextjs
  • Laravel
  • Vite
  • Tanstack Start
  • Components
  • Buttons
  • Button
  • File Trigger
  • Toggle
  • Charts
  • Chart
  • Collections
  • Accordion
  • Bubble
  • Collapsible
  • Context Menu
  • Dropdown Menu
  • Grid List
  • Item
  • List Box
  • Message
  • Table
  • Tag Group
  • Tree
  • Colors
  • Color
  • Controls
  • Command
  • Kbd
  • Slider
  • Switch
  • Toolbar
  • Date And Time
  • Calendar
  • Range Calendar
  • Date Field
  • Date Picker
  • Date Range Picker
  • Time Field
  • Drag And Drop
  • Drop Zone
  • Forms
  • Field
  • Input
  • Combobox
  • Input Group
  • Checkbox
  • Radio
  • Select
  • Text Field
  • Number Field
  • Search Field
  • Input OTP
  • Layouts
  • Container
  • Navbar
  • Sidebar
  • Media
  • Avatar
  • Carousel
  • Navigation
  • Link
  • Breadcrumbs
  • Tabs
  • Pagination
  • Overlays
  • Dialog
  • Alert Dialog
  • Sheet
  • Popover
  • Tooltip
  • Statuses
  • Alert
  • Badge
  • Empty
  • Meter
  • Progress
  • Skeleton
  • Toastalpha
  • Surfaces
  • Card
  • Separator

On this page

Tag Group

TagGroup

Installation

CLI
Manual

npx shadcn add https://hq-ui.vercel.app/r/tag

Examples

With remove button

Tags within the group can include a removal button.

tag-group-with-remove-demo
Ferrari
Lamborghini
Porsche
Bugatti
McLaren
Aston Martin
Bentley
Rolls-Royce
Maserati
Jaguar

Controlled

Manage the values of the tag group through the value prop.

tag-group-controlled-demo
Apple
Banana
Cherry
Date

You have selected:

Links

Incorporate a hyperlink within the tag group using the href prop.

tag-group-href-demo
React Tutorial
TypeScript Handbook
JavaScript Guide

For client-side routing, React Aria recommends using the onAction event to handle navigation programmatically instead of passing an href prop. This is because some collection items cannot be rendered as native elements due to HTML specification limitations.

Disabled

Disable tags either by setting the isDisabled prop or using disabledKeys on the TagGroup.

tag-group-disabled-demo
Disabled key
Samsung
OnePlus
Google
Xiaomi
Disabled by Tag
Samsung
OnePlus
Google
Xiaomi
Table
Tree

On this page

  • Installation
  • Examples
  • With remove button
  • Controlled
  • Links
  • Disabled