TagGroup

Groups removable or selectable tags.

View preview API reference View in Figma

FrameworksAstro · React · Elements

Registry commandlumen add TagGroup

InteractionEnhanced runtime

Design sourceLinked component node

See it in context

Preview

Copy a working example

Usage

Astro examples assume UIPrimitives is mounted once in your root layout. Do not add the runtime next to each component instance.

---
import { TagGroup } from '@santi020k/lumen-astro'
---

<TagGroup aria-label="Selected tags">
  <span data-ui-tag role="listitem">Astro <button aria-label="Remove Astro" data-ui-tag-remove type="button">Remove</button></span>
  <span data-ui-tag role="listitem">Accessible <button aria-label="Remove Accessible" data-ui-tag-remove type="button">Remove</button></span>
</TagGroup>

---
import { TagGroup } from '@santi020k/lumen-astro'
---

<TagGroup aria-label="Selected tags">
  <span data-ui-tag role="listitem">Astro <button aria-label="Remove Astro" data-ui-tag-remove type="button">Remove</button></span>
  <span data-ui-tag role="listitem">Accessible <button aria-label="Remove Accessible" data-ui-tag-remove type="button">Remove</button></span>
</TagGroup>

import { TagGroup } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <TagGroup aria-label="Selected tags">
      <span data-ui-tag role="listitem">Astro <button aria-label="Remove Astro" data-ui-tag-remove type="button">Remove</button></span>
      <span data-ui-tag role="listitem">Accessible <button aria-label="Remove Accessible" data-ui-tag-remove type="button">Remove</button></span>
    </TagGroup>
  </>
)

import { TagGroup } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <TagGroup aria-label="Selected tags">
      <span data-ui-tag role="listitem">Astro <button aria-label="Remove Astro" data-ui-tag-remove type="button">Remove</button></span>
      <span data-ui-tag role="listitem">Accessible <button aria-label="Remove Accessible" data-ui-tag-remove type="button">Remove</button></span>
    </TagGroup>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-tag-group aria-label="Selected tags">
  <span data-ui-tag role="listitem">Astro <button aria-label="Remove Astro" data-ui-tag-remove type="button">Remove</button></span>
  <span data-ui-tag role="listitem">Accessible <button aria-label="Remove Accessible" data-ui-tag-remove type="button">Remove</button></span>
</lumen-tag-group>

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-tag-group aria-label="Selected tags">
  <span data-ui-tag role="listitem">Astro <button aria-label="Remove Astro" data-ui-tag-remove type="button">Remove</button></span>
  <span data-ui-tag role="listitem">Accessible <button aria-label="Remove Accessible" data-ui-tag-remove type="button">Remove</button></span>
</lumen-tag-group>

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

API reference

Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.

Attribute	Values	Default	Description
class, className	string	""	Merges custom classes with the generated ui-* root classes.
...native attributes	HTML attributes	-	Forwards standard attributes to the root element unless the component consumes them.

Runtime events

CustomEvents dispatched by the Astro UIPrimitives runtime for this component.

Event	Target	Detail	When
ui:tag-remove	TagGroup root (.ui-tag-group or [data-ui-tag-group])	{ value: string \| undefined }	Fires after a [data-ui-tag-remove] control removes its closest tag or list item.