---
title: <file_title>
tags: UI reference
---

[//]: # (Read carefully all comments)
[//]: # (Replace text wrapped in angle brackets <replace_text_formatted_like_this>)
[//]: # (All components, elements, values... should be formatted as code)
[//]: # (The first part of the file doesn't support eDocs flavour. Everything must be in plain text. Eg. notes cannot be formatted with the :::tip syntax type. Just use the eDocs flavour in the second part)

[//]: # (FIRST PART. CODE DATA EXTRACTION)
# <Component_name>

[//]: # (Enter here the component description)

[//]: # (Include note text indicating the required backend service should be added. E.g. The QuerySignals services must be implemented.)

## Props
[//]: # (If there're no props, replace the section content with "None")

[//]: # (Prop name, type, and default value should be formatted as code. If a prop is required, refer it in italics before the description. Ie: *Required*. Button content with a message)
| Prop name | Description | Type | Default |
| --------- | ----------- | ---- | ------- |
| | | | |
| | | | |

## Methods

[//]: # (Take care with methods that are not public!)

[//]: # (If there're no methods, replace the section content with "None". If a method is required, refer it in italics before the description. Ie: *Required*. Button content with a message)

## Slots

[//]: # (If there're no slots, replace the section content with "None")
[//]: # (If a slot or binding is required, refer it in italics before the description. Ie: *Required*. Button content with a message)
[//]: # (The Bindings column includes in the following order: the binding name in bold but not code format, type with code format, and description. If a slot has more than one bindings, make sure that they are documented in the same cell separated with line breaks)
| Slot name | Description | Bindings <br/> (name - type - description) |
| ---- | ----------- | -------- |
| | | |
| | | |

## Dynamic classes

[//]: # (Optional section! Enter here a description)

[//]: # (SECOND PART. DOC TAG RELATED INFORMATION)
## Events

[//]: # (If there're no events, replace the section content with "None". If an event is required, refer it in italics before the description. Ie: *Required*. Button content with a message)

[//]: # (Event name and payload should be formatted as code. If there's no info/data for a category just type "None")
| Event name | Description | Payload | Payload type |
| ---------- | ----------- | ------- | ------------ |
| | | | |
| | | | |

:::tip X Events
Apart from the specific component events, **base events** can be emitted.
:::

## See it in action

[//]: # (Warning note here indicating the required backend service should be added. E.g. The QuerySignals services must be implemented.)

[//]: # (Adapt the example intro to suit any scenario/option)
_Type “puzzle” or another toy in the input field to try it out!_

[//]: # (Enter basic live example that relates with the definition or description of the component)
<div>
<LivePreview>
<template #editor>

</template>
<template #preview>

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

#### Play with props

[//]: # (Optional section. Only when there are props available and documented)

[//]: # (Include here an explanation of the example)

[//]: # (Adapt the example intro to suit any scenario/option)
_Type “puzzle” or another toy in the input field to try it out!_

[//]: # (Enter prop live example)
<div>
<LivePreview>
<template #editor>

</template>
<template #preview>
<SearchInput></SearchInput>
<QuerySuggestions :animation="'StaggeredFadeAndSlide'" />
</template>
</LivePreview>
</div>

#### Play with <slot_#1> slot

[//]: # (Optional section. Only when there are slots available and documented)

[//]: # (Enter here example explanation)

[//]: # (Adapt the example intro to suit any scenario/option)
_Type “puzzle” or another toy in the input field to try it out!_

[//]: # (Enter slot live example)
<div>
<LivePreview>
<template #editor>

</template>
<template #preview>

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

#### Play with <slot_#2> slot

[//]: # (Optional section. Only when there are slots available and documented)

[//]: # (Enter here slot explanation)

[//]: # (Adapt the example intro to suit any scenario/option)
_Type “puzzle” or another toy in the input field to try it out!_

[//]: # (Enter slot live example)
<div>
<LivePreview>
<template #editor>

</template>
<template #preview>

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

#### Play with events

[//]: # (Optional section. Only when there are slots available and documented)

[//]: # (Adapt the example intro to suit any scenario/option)
_Type “puzzle” or another toy in the input field to try it out!_

[//]: # (Enter event live example)
<div>
<LivePreview>
<template #editor>

</template>
<template #preview>
<SearchInput></SearchInput>
<QuerySuggestions :animation="'StaggeredFadeAndSlide'" />
</template>
</LivePreview>
</div>

## Extending the component

[//]: # (Optional section! Enter here description)

[//]: # (Adapt the example intro to suit any scenario/option)
_Type “puzzle” or another toy in the input field to try it out!_

<div>
<LivePreview>
<template #editor>

</template>
<template #preview>
<SearchInput />

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