> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# uiState

> Object with the state of your search UI.

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

## About this widget

The `uiState` object represents the state of the search UI and can be saved and returned to later.
It's updated whenever the user interacts with the UI and can be used to:

* Store the current search query and parameters
* Pass data to widgets
* Determine which results to show when a user visits a new page
  ([routing](/doc/api-reference/widgets/instantsearch/vue#param-routing))

It doesn't directly store search results:
just the state that leads to those results.

### Vue InstantSearch v2

`uiState` only works when the widgets responsible for each UI state attribute are mounted.
For example, a`searchBox`widget is necessary to provide a`query`.

### Vue InstantSearch v3 and later

The `uiState` passed to `initialUiState` or through routing needs to be nested per <Index />.
For example, if you only have a root index called `INDEX_NAME`,
you should use a value like `{ INDEX_NAME: { query: 'query' } }`.

### Example

This is an example of an InstantSearch `uiState` object.
It represents what the user has searched for, how they've refined the results, and how the results are displayed.

```js JavaScript icon=code theme={"system"}
const uiState = {
  query: "Hill Valley",
  refinementList: {
    colors: ["white", "black"],
  },
  configure: {
    distinct: true,
  },
  menu: {
    category: "Decoration",
  },
  hierarchicalMenu: {
    categories: ["Decoration > Clocks"],
  },
  numericMenu: {
    price: "100:500",
  },
  ratingMenu: {
    rating: 4,
  },
  range: {
    ageInYears: "2:10",
  },
  toggle: {
    freeShipping: true,
  },
  geoSearch: {
    boundingBox: "47.3165,4.9665,47.3424,5.0201",
  },
  sortBy: "most_popular_index",
  page: 2,
  hitsPerPage: 20,
};
```

### Custom widgets

To have your custom widgets interact with the `uiState` object,
you need to implement the `getWidgetUiState` and `getWidgetSearchParameters` methods in the connector.
For more information, see [Custom widgets](/doc/guides/building-search-ui/widgets/create-your-own-widgets/js#interact-with-routing).