TagGroup
Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.
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' |
Slots
| Slot name | Description |
|---|---|
Default slot | The tag group content |
| Event | Detail Type | Description |
|---|---|---|
change | NordEvent | Fired whenever a tag has been checked or unchecked via user interaction. |
remove | NordEvent | Fired when the remove button is activated on a tag. This event should be used to remove the tag from the DOM. |
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
roleattribute on the tag group to provide additional semantics. - Use an
aria-labelledbyattribute 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
roleattribute 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:
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):
Avoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”:
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 .