Tag GroupNew

Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.

Open in new window

View RTL

<nord-visually-hidden id="label">Category</nord-visually-hidden>
<nord-tag-group aria-labelledby="label">
  <nord-tag variant="selectable">Canine</nord-tag>
  <nord-tag variant="selectable">Feline</nord-tag>
  <nord-tag variant="selectable" checked>Rodents</nord-tag>
</nord-tag-group>

<nord-stack align-items="start">
  <nord-visually-hidden id="label">Category</nord-visually-hidden>
  <nord-tag-group aria-labelledby="label">
    <nord-tag variant="selectable">Canine</nord-tag>
    <nord-tag variant="selectable">Feline</nord-tag>
    <nord-tag variant="selectable" checked>Rodents</nord-tag>
  </nord-tag-group>

  <nord-visually-hidden id="label">Category</nord-visually-hidden>
  <nord-tag-group aria-labelledby="label" direction="vertical">
    <nord-tag expand variant="selectable">Canine</nord-tag>
    <nord-tag expand variant="selectable">Feline</nord-tag>
    <nord-tag expand variant="selectable" checked>Rodents</nord-tag>
  </nord-tag-group>
</nord-stack>

<!-- When you start out with one tag, but conditionally add more -->

<nord-stack>
  <nord-visually-hidden id="label">Category</nord-visually-hidden>
  <nord-tag-group aria-labelledby="label">
    <nord-tag variant="selectable">Canine</nord-tag>
  </nord-tag-group>

  <nord-button id="add-tag" size="s">Add tag to group</nord-button>
</nord-stack>

<script>
  document.querySelector("#add-tag").addEventListener("click", () => {
    const tagGroup = document.querySelector("nord-tag-group")
    const tag = document.createElement("nord-tag")
    tag.setAttribute("variant", "selectable")
    tag.textContent = "Feline"
    tagGroup.appendChild(tag)
  })
</script>

<nord-visually-hidden id="label">Category</nord-visually-hidden>
<nord-tag-group aria-labelledby="label">
  <nord-tag variant="selectable" size="s">Canine</nord-tag>
  <nord-tag variant="selectable" size="s">Feline</nord-tag>
  <nord-tag variant="selectable" size="s" checked>Rodents</nord-tag>
</nord-tag-group>

<nord-visually-hidden id="label">Category</nord-visually-hidden>
<nord-tag-group variant="spaced" aria-labelledby="label" vr>
  <nord-tag variant="selectable">Canine</nord-tag>
  <nord-tag variant="selectable">Feline</nord-tag>
  <nord-tag variant="selectable" checked>Rodents</nord-tag>
</nord-tag-group>

<nord-stack gap="s" direction="horizontal" align-items="center" wrap>
  <label id="label" class="n-font-size-s">Category</label>
  <nord-tag-group aria-labelledby="label">
    <nord-tag size="s" variant="selectable">Canine</nord-tag>
    <nord-tag size="s" variant="selectable">Feline</nord-tag>
    <nord-tag size="s" variant="selectable" checked>Rodents</nord-tag>
  </nord-tag-group>
</nord-stack>

Properties

Property	Attribute	Description	Type	Default
`variant`	`variant`	The style variant of the tag group.	`"default" \| "spaced"`	`"default"`
`direction`	`direction`	The direction of the tag group.	`"vertical" \| "horizontal"`	`"horizontal"`
`wrap`	`wrap`	Defines whether the tags are forced in a single line or can be flowed into multiple lines (only applied when variant is set to `spaced`).	`boolean`	`false`
`role`	`role`	The appropriate role for the containing element.	`string`	`"group"`

Events

Event	Description	Type
`change`	Fired whenever a tag has been checked or unchecked via user interaction.	`NordEvent`
`remove`	Fired when the remove button is activated on a tag. This event should be used to remove the tag from the DOM.	`NordEvent`

Slots

Slot name	Description
Default slot	The tag group content

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-tag-group-border-radius`	Controls the rounded corners of the tag group, using border radius tokens. Only relevant for the default variant.	`var(--n-border-radius-s)`
`--n-tag-group-box-shadow`	Controls the surrounding shadow, using box shadow tokens. Only relevant for the default variant.	`var(--n-box-shadow)`

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do

Use to group together selectable tags.
Use the appropriate role attribute on the tag group to provide additional semantics.
Use an aria-labelledby attribute referencing another element to best explain the contents of the tag group.

Don’t

Don’t add components other than selectable tags and in some instances visually hidden components to the tag group.
Don’t skip the addition of an appropriate label if the added role attribute value calls for it.
Don’t use for building grid based layouts.

Content guidelines

Tags should use short and clear labels for easy scanning. They should be concise and informative:

Has seizures

This dog has seizures often

When writing tag labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

Service dog

Service Dog

Avoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”:

Service dog

A service dog

Variants

This section describes the different component variants, their purpose, and when to use each variant.

Name	Purpose
`default`	The default variant renders a group of tags to emphasize that they’re thematically-related.
`spaced`	The spaced variant renders a gap between the tags to space them out evenly.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.

Tag GroupNew

Properties

Events

Slots

CSS Properties

Usage #

Do #

Don’t #

Content guidelines #

Variants #