Tags-group

Horizontal collection of Tag components with optional runtime-driven overflow. Without data-max-rows, the group simply wraps. With it, the runtime hides tags beyond row N and appends a "+K more" tag.

Per the answered design question recorded with this component: runtime-measured overflow, not author-counted.

When to use

Skill stacks, applied filters, label lists where space is bounded.
Anywhere a collection of Tags should be visible at a glance but truncated to fit a row count.

Variants

Variant	Class	Use for
No-cap	`.tags-group`	All tags visible, wraps naturally
Capped	`.tags-group[data-max-rows="N"]`	Hide tags past row N, show +K more

Anatomy

<!-- Unlimited wrap -->
<div class="tags-group">
  <span class="tag -muted">React</span>
  <span class="tag -muted">TypeScript</span>
  <span class="tag -muted">CSS</span>
</div>

<!-- Trim to 2 rows -->
<div class="tags-group" data-max-rows="2">
  <span class="tag -muted">React</span>
  <span class="tag -muted">TypeScript</span>
  <span class="tag -muted">CSS</span>
  <span class="tag -muted">Vite</span>
  <span class="tag -muted">Vitest</span>
  <!-- … many more … -->
</div>

The runtime (initTagsGroup, auto-registered) measures wrapped layout, hides tags whose row index ≥ N, and appends or updates a .tag.-muted.tags-group__overflow element with text +K more. On container resize (via ResizeObserver), it re-runs.

For environments without JS, the cap is a no-op and all tags remain visible — the page still works.

Tokens used

--space-gap-elements-s — gap between tags

Tag styling is inherited from the Tag component.

Accessibility

The overflow tag has aria-label="and K more" so screen readers announce the truncated count.
Hidden tags use display: none (via data-tags-hidden="true"), so they are removed from the accessibility tree. Their content is not read.
For full-list access, pair the group with a Show all button or Popover that reveals the hidden tags.

Edge cases

No JS environment: without runtime, all tags are visible. Cap is a progressive enhancement.
Container resize: ResizeObserver re-runs layout. If your application toggles a sidebar or other layout shift, the group re-flows automatically.
Static overflow tag: authors can pre-render a .tag.-muted.tags-group__overflow element; the runtime will reuse it rather than appending a new one.
Single-line caps: data-max-rows="1" is allowed and common (chip rows in toolbar headers).

Do

Set data-max-rows only when you have a bounded space.
Provide an alternative way to see the full list when capping (button → Popover with all tags, or Sheet on small screens).

Don't

Don't manually count tags to truncate. Let the runtime measure.
Don't apply CSS max-height to the group — overflow is handled by the runtime, not CSS clipping.