TagGroup

A labeled set of pill-shaped tags with an optional dismiss control per tag, composing a grouping host, a wrapped list.

View code

<form method="post" action="/jobs/filters">
	<TagGroup aria-labelledby="preview-filters-label">
		<Label id="preview-filters-label">Applied filters</Label>
		<TagGroup.List>
			{filters.map((filter) => (
				<TagGroup.Tag key={filter.value} color={filter.color}>
					{filter.label}
					<TagGroup.Remove
						name="remove"
						value={filter.value}
						aria-label={`Remove the ${filter.label} filter`}
					/>
				</TagGroup.Tag>
			))}
		</TagGroup.List>
	</TagGroup>
</form>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { TagGroup } from "@sdxc/ui";

Renders the group's <div> host, laying its TagGroup.List child (and any preceding Label) out in a column with a small gap. Dev mode warns when it lacks an accessible name for assistive technology.

Composition

The parts the component publishes, each a static property of the host.

TagGroup
TagGroup.ListRenders the group's <ul> list, resetting native list markers and spacing and laying TagGroup.Tag children out as a wrapped row with a small gap between them.
TagGroup.TagRenders a single pill-shaped <li>, colored through the data-color attribute contract shared with Badge and sized through data-size.
TagGroup.RemoveRenders a dismiss control for the tag it's composed inside: a small, ghost-styled Button with an "X" glyph submitting as type="submit", colored from the ambient TagGroup.Tag's data-color.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in ElementProps<"div">.

Also accepts everything in ElementProps<"ul">.

Prop	Type	Description
`color?`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role. Defaults to DEFAULT_COLOR.
`size?`	`"sm" \| "md"`	Size variant. Defaults to DEFAULT_SIZE.

Also accepts everything in ElementProps<"li">.

Prop	Type	Description
`"aria-label"`	`string`	Accessible label for the icon-only control — required, since the button carries no visible text for assistive technology to read.

Types

Name	Values	What it decides
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role, each mapped to its matching `--ui-*` variables — the same set Badge and Button use.
`Size`	`"sm" \| "md"`	Size variant controlling a tag's padding and font size.