# nord-tag-group > Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by. ## 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: > **Do:** Has seizures > **Don't:** 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): > **Do:** Service dog > **Don't:** Service Dog Avoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”: > **Do:** Service dog > **Don't:** 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. | ## Examples ### Basic ```html Category Canine Feline Rodents ``` ### Direction ```html Category Canine Feline Rodents Category Canine Feline Rodents ``` ### Single ```html Category Canine Add tag to group ``` ### Small Tags ```html Category Canine Feline Rodents ``` ### Spaced ```html Category Canine Feline Rodents ``` ### With Visual Label ```html Canine Feline Rodents ``` ## API Reference ### Properties - **variant** (`'default' | 'spaced'`, default: `'default'`) — The style variant of the tag group. - **direction** (`'vertical' | 'horizontal'`, default: `'horizontal'`) — The direction of the tag group. - **wrap** (`boolean`, default: `false`) — 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). - **role** (`string`, default: `'group'`) — The appropriate role for the containing element. ### Events - **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. ### Slots - **(default)** — The tag group content ### CSS Custom Properties - `--n-tag-group-border-radius` (default: `var(--n-border-radius-s)`) — Controls the rounded corners of the tag group, using border radius tokens. Only relevant for the default variant. - `--n-tag-group-box-shadow` (default: `var(--n-box-shadow)`) — Controls the surrounding shadow, using box shadow tokens. Only relevant for the default variant.