Tag

Overview

Use the tag component to display one or more values that provide additional context for an activity.

Responsive UI supports two use cases for tags: displaying metadata and displaying search filters.

Metadata tags

The first use case is displaying a list of metadata values for an element. Let’s say I publish a blog post and want to add metadata tags to my post to help categorize it. I could add values like “javascript”, “web components”, and “security”, and anyone reading this post would have a better idea of the topics it covers.

These metadata tags may or may not be clickable. In the blog post example, it might be helpful to allow the user to click one of the metadata tags to, say, find all blog posts on that topic.

Search filter tags

The second use case is displaying a list of search filter tags. Let’s say I’m performing a complex search based on multiple search filters. If the search view displays each search filter as a clickable, closable tag, I can simply click any of the search filter tags to remove it and widen my search results.

The list of search filter tags can also optionally include a “CLEAR ALL” option, allowing me to quickly remove all filters from the search.

You should display search filter tags above the search results since they help control which data displays.

You should typically hide search filter tags on mobile devices. They can take up a lot of room at smaller screen widths, and since they are a secondary level of control (the primary being the search inputs), they should be hidden in this case.

Development

Web component development

Component reference

rui-tag-button

Implementation

Begin by importing the rui-buttons module into your application.

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-buttons/rui-buttons-imports';

Let’s start by defining two different string arrays in the view’s TypeScript: one with a list of metadata tags and another with a list of search filter tags.

public metadataTagList: string[] = ['javascript', 'angular', 'typescript', 'html5-canvas'];
public searchFilterTagList: string[] = ['Name starts with F', 'Location is Monett', 'Department is Tech Services - EA'];

Metadata Tags

Now let’s create an example of a simple, non-clickable tag list that displays metadata tags. We add an rui-tag-button for each tag in the list. Tags are non-clickable by default.

<rui-tag-button *ngFor="let tag of metadataTagList" [text]="tag"></rui-tag-button>

Now let’s create an example of a clickable tag list that displays metadata tags. This is the same as the previous example, except we include isClickable=“true” and specify an event handler for the rui-click event.

<rui-tag-button *ngFor="let tag of metadataTagList" [text]="tag" isClickable="true" (rui-click)="tagClicked($event)"></rui-tag-button>

Search Filter Tags

Now let’s create an example of a list of search filter tags. The user can click each tag button to remove it from the list. This is similar to the previous example, except we include isClosable=“true”.

<rui-tag-button *ngFor="let tag of searchFilterTagList" [text]="tag" isClosable="true"
    isClickable="true" (rui-click)="removeSearchFilterTag($event)">
</rui-tag-button>

And last, let’s create an example of a list of search filter tags that includes a “CLEAR ALL” option. This allows the user to clear the entire list at once. The implementation is the same as the previous example, although we include an extra tag with the text “CLEAR ALL” that clears the list of tags when clicked.

<rui-tag-button *ngFor="let tag of searchFilterTagList" [text]="tag" isClosable="true"
    isClickable="true" (rui-click)="removeSearchFilterClearAllTag($event)">
</rui-tag-button>

<rui-tag-button *ngIf="searchFilterClearAllTags.length > 0" text="CLEAR ALL"
    isClickable="true" (rui-click)="clearAllSearchFilterTags($event)">
</rui-tag-button>

Angular wrapper development

Wrapper reference

jha-tag-button

jha-tag-close-button

Implementation

Begin by importing the JhaButtonsModule into your application.

/ import into your app.module
import { JhaButtonsModule } from '@jkhy/responsive-ui-angular/jha-buttons';

@NgModule({
    imports: [
        ...
        JhaButtonsModule,
        ...
    ]
})

export class AppModule(){}

Let’s start by defining two different string arrays in the view’s TypeScript: one with a list of metadata tags and another with a list of search filter tags.

public metadataTagList: string[] = ['javascript', 'angular', 'typescript', 'html5-canvas'];
public searchFilterTagList: string[] = ['Name starts with F', 'Location is Monett', 'Department is Tech Services - EA'];

Metadata Tags

Now let’s create an example of a simple, non-clickable tag list that displays metadata tags. We add a jha-tag-button for each tag in the list. Tags are non-clickable by default.

<jha-tag-button *ngFor="let tag of metadataTagList" [jhaText]="tag"></jha-tag-button>

Now let’s create an example of a clickable tag list that displays metadata tags. This is the same as the previous example, except we include [jhaIsClickable]=“true” and specify an event handler for the jhaClick event.

<jha-tag-button *ngFor="let tag of metadataTagList" [jhaText]="tag" [jhaIsClickable]="true" (jhaClick)="tagClicked($event)"></jha-tag-button>

Search Filter Tags

Now let’s create an example of a list of search filter tags. The user can click each tag button to remove it from the list. This is similar to the previous example, except we include [jhaIsClosable]=“true”.

<jha-tag-button *ngFor="let tag of searchFilterTagList" [jhaText]="tag" [jhaIsClosable]="true"
    [jhaIsClickable]="true" (jhaClick)="removeSearchFilterTag($event)">
</jha-tag-button>

And last, let’s create an example of a list of search filter tags that includes a “CLEAR ALL” option. This allows the user to clear the entire list at once. The implementation is the same as the previous example, although we include an extra tag with the text “CLEAR ALL” that clears the list of tags when clicked.

<jha-tag-button *ngFor="let tag of searchFilterTagList" [jhaText]="tag" [jhaIsClosable]="true"
    [jhaIsClickable]="true" (jhaClick)="removeSearchFilterClearAllTag($event)">
</jha-tag-button>

<jha-tag-button *ngIf="searchFilterClearAllTags.length > 0" jhaText="CLEAR ALL"
    [jhaIsClickable]="true" (jhaClick)="clearAllSearchFilterTags($event)">
</jha-tag-button>

Design

Figma design

Metadata tags are either clickable or non-clickable.

Search filter tags are closable. You can optionally add a clickable “CLEAR” tag to the right of all closable search filter tags if you want the user to be able to clear all the search filters at once.

Adobe XD design

Metadata tags are either clickable or non-clickable.

Search filter tags are closable. You can optionally add a clickable “CLEAR” tag to the right of all closable search filter tags if you want the user to be able to clear all the search filters at once.