Tag
Tags represent a set of keywords that help label, categorize, and organize objects. Commonly used to signify the attributes of an object.
<sl-tag>Mathematics</sl-tag>
<sl-tag removable>History</sl-tag>
<sl-tag disabled removable>Science</sl-tag>When to use
Categorization, Labeling, and Filtering
Use tags to categorize and label course content, enhancing organization, discoverability, and enabling efficient filtering of content on a page, within components, or through search functionalities. For instance, courses or lessons can be tagged with subjects such as "Mathematics," "Science," "History," or "Literature." This approach makes it easier for users to quickly find and access relevant materials.
User-Generated Tags
Enable users to create and manage their own custom labels, allowing for a personalized organization system. In a student dashboard, for example, users might tag their notes or assignments with custom labels like "Exam Prep," "Homework," "Group Project," or "To Review," facilitating better organization.
When not to use
Status Indicators
For tracking the status of tasks or items, such as "In Progress," "Completed," or "Pending," use a badge instead. Badges are specifically designed to convey status and can provide visual cues through colors, making them more effective for this purpose.
Anatomy tag
| Item | Name | Description | Optional |
|---|---|---|---|
| 1 | Container | The container contains the label and close button | no |
| 2 | Label | The label is a brief text that decribed the tag | no |
| 3 | Close button | To remove the tag | yes |
Anatomy tag list
| Item | Name | Description | Optional |
|---|---|---|---|
| 1 | Counter | Displays the count of selected tags when not all tags are visible, with a maximum display of 99. If more than 99 tags are selected, it will be shown as "99+." | yes |
| 2 | List of tags | Consists of a collection of tags | no |
Figma Options
With these options, you can tweak the appearance of the tag in Figma. They are available in the Design Panel so you can compose the tag to exactly fit the user experience need for the use case you are working on.
Tag
| Item | Options | Description |
|---|---|---|
| Emphasis | subtle bold | Indicates the which emphasis the tag should have |
| State tag | idle hover active disabled | Indicates the state of the tag |
| State close | idle hover active disabled | Indicates the state of the close button |
| Size | md lg | Size 'md' is the default size of the tag component |
| Removable | boolean | Displays a close button |
| Label | value | The text of the label |
| Focus ring | boolean | To show the focus ring of the tag |
Tag list
| Item | Options | Description |
|---|---|---|
| Emphasis | subtle bold | Indicates the which emphasis the tag should have |
| Size | md lg | Indicates the size of the tag list |
| Items | 1 2 3 4 5 6 | Indicates how many tags are shown in the tag list |
| Stacked | boolean | Indicates if the tags are stacked, this will show a counter in front of the tag list |
<sl-tag-list stacked>
<sl-tag removable>Mathematics</sl-tag>
...
<sl-tag removable>English</sl-tag>
</sl-tag-list>Tag list API
Tag list component provides properties to define the experience in different use cases, and it is a kind of wrapper for multiple tags.
Properties
| Name | Attribute | Type | Default | Description |
|---|---|---|---|---|
emphasis | emphasis | 'subtle' | 'bold' | undefined | The emphasis of the tag-list and tags inside. Defaults to 'subtle'. | |
size | size | 'md' | 'lg' | undefined | The size of the tag-list (determines size of tags inside the tag-list). Defaults to `md`. | |
stacked | stacked | boolean | undefined | This will hide tags that do not fit inside the available space when set. It will also display a counter that indicates the number of hidden tags. |
Slots
| Name | Description |
|---|---|
default | The place for tags. |
Tag API
Tag has a range of properties to define the experience in different use cases.
Properties
| Name | Attribute | Type | Default | Description |
|---|---|---|---|---|
disabled | disabled | boolean | undefined | Whether the tag component is disabled, when set no interaction is possible. | |
emphasis | emphasis | 'subtle' | 'bold' | undefined | The emphasis of the tag; defaults to 'subtle'. | |
removable | removable | boolean | undefined | Whether the tag component is removable. | |
size | size | 'md' | 'lg' | undefined | The size of the tag. Defaults to `md`. |
Events
| Name | Event type | Description |
|---|---|---|
sl-remove | SlRemoveEvent | Emits when the tag is removed. |
Slots
| Name | Description |
|---|---|
default | The tag label. |
Keyboard interactions
The tag list component uses a roving tabindex. You can focus the first tag in the list by pressing the Tab key. After that, you can navigate through the tags using the left and right arrow keys. You can navigate back to the previous tag with left. The focus indicator loops, so when you are at the last option and press right it will focus on the first tag. In the stacked version of tag-list, when there are hidden tags, you can navigate only through visible tags with arrow keys. The first tag indicates how many hidden tags there are. Using a screen reader, it will announce how many hidden tags there are.
When you click on a tag inside a tag-list (as long as it is not disabled), the tag become the active spot for using the keyboard. This means you can start using keyboard navigation right from the tag you just clicked on.
When the tag is focused and is removable, it can be removed by pressing the Delete or Backspace key. This behavior is also announced by the screen reader.
WAI-ARIA
WAI-ARIA Roles, States, and Properties for a tag and tag-list component provide essential information to assistive technologies and screen readers.
Tag
| Attribute | Value | Description | User supplied |
|---|---|---|---|
role | 'listitem', 'button' | Identifies the tag element as a listitem when it's used inside the sl-tag-list - this role is added automatically. Please provide a role button when the tag is interactive, is used to perform an action or is removable and not used inside sl-tag-list. | no/yes |
aria-description | string | Defines a string that describes the action that will be performed when the user interacts with the tag or the purpose/more information about the tag. aria-description is added automatically for the removable tag to describe the ability to use the keyboard to remove the tag. | no |
aria-labelledby | string | Used to label the tag that indicates the number of hidden tags, when the tag list overflows. It contains the id of the tooltip. The tooltip lists all the hidden tags. | no |
Tag list
| Attribute | Value | Description | User supplied |
|---|---|---|---|
role | 'list' | Identifies the tag-list as a list. | no |
aria-label | string | String that labels the tag list. Use this to label what the tag list indicates, such as the selected options in a combobox. | yes |
aria-labelledby | string | Can be used to connect with a single header/element that describes the tag list. | yes |