---
# System prepended metadata

title: RelatedTag
tags: [UI reference]

---

---
title: RelatedTag
tags: UI reference
---

# RelatedTag

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*.

Commonly, a `RelatedTag` is passed as a prop for the [`RelatedTags`](./related-tags) component.

## Props

| Name         | Description                            | Type              | Default |
| ------------ | -------------------------------------- | ----------------- | ------- |
| `relatedTag` | The related tag for the `default` slot. | `RelatedTagModel` |     |

## Slots

[//]: # 'Bindings and types should be formatted as code'

| Name      | Description                               | Bindings  </br> (name - type - description)                                | 
| --------- | ----------------------------------------- | ----------------------------------------------------- | 
| `default` | Custom content that replaces the RelatedTag default content. | **relatedTag** - `RelatedTag` - Related tag data <br/> **isSelected** - `boolean` - The related tag is selected when `true` | 

## Dynamic classes

`RelatedTag` uses the `x-related-tag--is-selected` dynamic CSS class so you can style it when is selected.

## Events

This component emits the following events:

- [`RelatedTagsChanged`](./../../api/x-components.relatedtagsxevents.md)
- [`RelatedTagsRequestChanged`](./../../api/x-components.relatedtagsxevents.md)
- [`SelectedRelatedTagsChanged`](./../../api/x-components.relatedtagsxevents.md) 
- [`UserDeselectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md) 
- [`UserPickedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)  
- [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)  


## See it in action

<!-- prettier-ignore-start -->
:::warning Backend service required
The QuerySignals microservice must be implemented.
:::
<!-- prettier-ignore-end -->

Here you can see how the related tag “tag” is rendered.

<div>
<LivePreview>
<template #editor>

```vue
<RelatedTag :relatedTag="{ tag: 'Tag' }"></RelatedTag>
```

</template>
<template #preview>

<RelatedTag :relatedTag="{ tag: 'Tag' }"></RelatedTag>

</template>
</LivePreview>
</div>

### Play with props

_See how the related tag can be rendered._

<div>
<LivePreview>
<template #editor>

```vue
<RelatedTag :relatedTag="{ tag: 'Tag' }"></RelatedTag>
```

</template>
<template #preview>

<RelatedTag :relatedTag="{ tag: 'Tag' }"></RelatedTag>

</template>
</LivePreview>
</div>

### Play with default slot

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

_See how the related tag can be rendered._

<div>
<LivePreview>
<template #editor>

```vue
<RelatedTag :relatedTag="{ tag: 'Tag' }">
  <template #default="{ relatedTag }">
    <img class="x-related-tag__icon" src="/assets/icons/tag.svg" />
    <span class="x-related-tag__tag" :aria-label="relatedTag.tag">{{ relatedTag.tag }}</span>
  </template>
</RelatedTag>
```

</template>
<template #preview="{message,update_message}">

<RelatedTag :relatedTag="{ tag: 'Tag' }"><template #default="{ relatedTag }"><img class="x-related-tag__icon" src="/assets/icons/tag.svg"  /><span class="x-related-tag__tag" :aria-label="relatedTag.tag">{{ relatedTag.tag }}</span></template></RelatedTag>

</template>
</LivePreview>
</div>

### 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._

[//]: # 'Enter event live example'

<div>
<LivePreview>
<template #editor>

```vue
<RelatedTag
  :relatedTag="{ tag: 'Tag' }"
  @UserSelectedARelatedTag="(payload) => update_message(payload)"
></RelatedTag>
<p>{{ message }}</p>
```

</template>
<template #preview="{message,update_message}">

<RelatedTag :relatedTag="{ tag: 'Tag' }" @UserSelectedARelatedTag="(payload)=> update_message(payload.tag)"></RelatedTag>

<p>{{ message }}</p>

</template>
</LivePreview>
</div>
