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

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

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

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