---
# System prepended metadata

title: NextQuery
tags: [UI reference]

---

---
title: NextQuery
tags: UI reference
---

# NextQuery

This component renders a next query item. It receives the suggestion to be rendered as a prop. You can use the default slot to change the next query content. If the slot is not overridden, it renders the suggestion query by default.

## Props

| Name    | Description                                           | Type             | Default |
| ------------ | ------------------------------------------------ | ---------------- | ------- |
| `suggestion` | The suggestion to render and use in the default slot | `NextQueryModel` |  None   |


## Slots

| Name            | Description             | Bindings </br>(name - type - description)                     | 
| --------------- | ------------------------|-------------------------------------------------------------- | 
|  `default`      |  Next query content     |  **suggestion** - `Suggestion` - Next query suggestion data   | 


## Events

This component emits the following events:

-`UserSelectedANextQuery` 

## See it in action

This components only requires a suggestion as a prop to be rendered. By default, it renders the suggestion query of the next query.

```vue live
<NextQuery :suggestion="{ query: 'puzzle' }"/>
```

### Play with default slot  

The `default` slot allows you to replace the content of the suggestion button. In this example, the next query is rendered as a bullet point.

```vue live
<NextQuery :suggestion="{ query: 'puzzle' }">
<template #default="{ suggestion }">
  <svg height="10" width="10">
    <circle cx="5" cy="5" r="4" stroke="black" />
  </svg>
  <span class="x-next-query__query" :aria-label="suggestion.query">{{ suggestion.query }}</span>
</template>
</NextQuery>
```


### Play with events  

In this example, the `UserSelectedANextQuery` event is triggered when you click the next query. Here you can see how the search input is updated with the suggestion.

_Click the “puzzle” next query suggestion and observe how the search input changes. If the input already contains the suggestion, delete it and click “puzzle” again._  


```vue live
<SearchInput></SearchInput>
<NextQuery :suggestion="{ query: 'puzzle' }"/>
```
