1 min read



This component renders a related tag for a query. A related tag is a descriptive keyword related to the current query to fine-tune the search. For example, if you are searching for lego, a related tag could be city, refining the search with lego city.


Name Description Type Default
highlightCurated Indicates if the curated related tag should be highlighted. boolean false
relatedTag The related tag model data. RelatedTagModel


Name Description Bindings
(name - type - description)
default Custom content that replaces the RelatedTag default content. relatedTag RelatedTag - Related tag data.
isSelected boolean - Related tag status.
shouldHighlightCurated boolean - True if the curated RTs should be displayed.

Dynamic classes

RelatedTag uses the following dynamic CSS classes so you can style it when is:

  • Selected: x-related-tag--is-selected.
  • Curated: x-related-tag--is-curated.


This component emits the following events:

See it in action

Backend service required

The QuerySignals microservice must be implemented.

In this example related tag data is passed as a prop.

Here you can see how the RelatedTag component is rendered.

Play with default slot

In this example, an HTML span element is passed in the default slot.

See how the related tag can be rendered.

Play with events

In this example, the UserSelectedARelatedTag event is implemented, as illustrated by the “Tag” message returned.

See how the event is triggered when the related tag is clicked.