> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# ais-toggle-refinement
> Lets users toggle a specific filter.
```vue Signature theme={"system"}
```
## Import
To ensure optimal bundle sizes,
see [Optimize build size](/doc/guides/building-search-ui/going-further/improve-performance/vue#optimize-build-size).
```js Vue icon=code theme={"system"}
import { AisToggleRefinement } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3
export default {
components: {
AisToggleRefinement
},
// ...
};
```
This imports all widgets, even the ones you don't use.
For more information, see [Get started with Vue InstantSearch](/doc/guides/building-search-ui/getting-started/vue).
```js JavaScript icon="code" theme={"system"}
import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3
Vue.use(InstantSearch);
```
Preview this widget and its behavior.
## About this widget
The `ais-toggle-refinement` widget provides an on/off filtering feature based on an attribute value.
## Examples
```vue Vue icon=code theme={"system"}
```
## Props
The name of the attribute on which to apply the refinement.
To avoid unexpected behavior, you can't use the same `attribute` prop in a different type of widget.
```vue Vue icon=code theme={"system"}
```
The label to display for the checkbox.
```vue Vue icon=code theme={"system"}
```
The value of the refinement to apply on the attribute when checked.
```vue Vue icon=code theme={"system"}
```
The value of the refinement to apply on the attribute when unchecked.
```vue Vue icon=code theme={"system"}
```
The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue#style-your-widgets):
* `ais-ToggleRefinement`. The root of the widget.
* `ais-ToggleRefinement--noRefinement`. The root of the widget without refinement.
* `ais-ToggleRefinement-label`. The label of the toggle.
* `ais-ToggleRefinement-checkbox`. The checkbox element of the toggle.
* `ais-ToggleRefinement-labelText`. The label text of the toggle.
* `ais-ToggleRefinement-count`. The count of the toggle.
```vue Vue icon=code theme={"system"}
```
## Customize the UI
The slot to override the complete DOM output of the widget.
When you implement this slot,
none of the other slots will change the output,
as the default slot surrounds them.
**Scope**
* `value: object`. The current refinement. It contains `name`, `count` and `isRefined`.
* `canRefine: boolean`. Whether the refinement can be applied.
* `refine: (value: string) => void`. The function to call with the provided value to update the refinement.
* `createURL: (value: string) => void`. The function to generate a link from the provided value.
* `sendEvent: (eventType: 'click', facetValue: string) => void`. The function to send `click` events.
* The `view` event is automatically sent when the facets are rendered.
* The `click` event is automatically sent when `refine` is called.
To learn more, see the [`insights`](/doc/api-reference/widgets/insights/vue) middleware.
```vue Vue icon=code theme={"system"}
{{ value.name }}
({{ value.count }})
```
## HTML output
```html HTML icon=code-xml theme={"system"}