--- title: "Adding Live Filters to a View" date: 2026-11-08 updated: 2026-11-08 author: "Casey Burridge" link: "https://www.gravitykit.com/docs/gravityview-pro/live-filters/adding-live-filters-to-a-view/" category: "GravityView Pro > Live Filters" --- Live Filters adds a sidebar of filters to a View. Visitors narrow the entries with checkboxes, dropdowns, range sliders and star ratings, and every option shows how many entries match before they click. This article explains how to turn on Live Filters, add filters, configure each one and choose how the sidebar works. Live Filters is part of [GravityView Pro](https://www.gravitykit.com/products/gravityview-pro/). The All Access Pass includes GravityView Pro. ![A business directory with a Live Filters sidebar on the left. Each option shows how many entries match: Salon & spa 25, Cafe 22, Bar 22.](https://www.gravitykit.com/wp-content/uploads/2026/10/live-filters-front-end.png) ## Before you begin - Install and activate the latest version of GravityView Pro. - Create a View, or open one you already have. Live Filters is added to an existing View, so your fields, layout and settings stay as they are. ## Step 1: Turn on Live Filters and set up the sidebar - Open your View in the View editor. - In the **Settings** box below the layout, click **Live Filters**. - Turn on **Enable Live Filters**. ![The Live Filters tab in the View's Settings box, with the Enable Live Filters switch highlighted.](https://www.gravitykit.com/wp-content/uploads/2026/10/live-filters-settings.png) *The sidebar settings appear once Live Filters is on:* | Setting | What it does | |---|---| | **Apply filters** | **Instantly, as filters change** updates the results with every click. **After pressing an "Apply" button** waits until the visitor presses **Apply**, which suits visitors who navigate with a keyboard. | | **Sidebar label** | The heading above the filters. **Hide the label visually** hides it on screen and keeps it for screen readers. | | **Sidebar location** | **Left** or **Right** of the entries. | | **Sidebar style** | **One panel** for all filters, or **A panel per filter**. This applies when the View uses a theme. | | **Sticky sidebar** | Keeps the sidebar in view while visitors scroll the entries. | ## Step 2: Add filters Filters live in their own **Live Filters** area in the **Multiple Entries Layout** tab, above **Entries Fields**. The **Configure filters** button on the settings tab takes you there. - Click the **Multiple Entries Layout** tab. - In the **Live Filters** area, click **Add Filter**. - Choose a field from the list. You can type in the search box to find it. - Repeat for each field visitors should filter by. Fields that are already filters are greyed out in the list. Drag a filter, or use the arrows that appear when you hover over it, to change its order in the sidebar. ![The Live Filters area of the Multiple Entries layout, listing five filters: What are you looking for?, Neighborhood, Price level, Rating and Features.](https://www.gravitykit.com/wp-content/uploads/2026/10/live-filters-in-the-layout.png) ### Which fields can be filters The field type decides how a filter can display: | Field type | Filter displays | |---|---| | Fields with choices (Drop Down, Radio Buttons, Checkboxes, Multi Select) | Checkboxes, radio buttons, dropdown or searchable dropdown | | Number fields | Range slider | | Date fields | Date or date range | | Ratings | Star rating | ## Step 3: Configure each filter Click the gear icon on a filter to open its settings. ![The settings for a filter on the Category field: Display as, Default Value, Custom Label, Help text, Empty options, Order options by, and Collapse long lists behind a toggle.](https://www.gravitykit.com/wp-content/uploads/2026/10/live-filters-filter-settings.png)| Setting | What it does | |---|---| | **Display as** | How the filter appears in the sidebar. See the display types below. | | **Default Value** | A choice that's selected when a visitor first opens the View. Visitors can change or clear it. | | **Custom Label** | The filter's heading in the sidebar. Leave it empty to use the field label. | | **Help text** | An optional line shown with the filter, below its heading. | | **Empty options** | What happens to options that no remaining entry matches: **Hide options with no matches**, or **Show them greyed out**. | | **Order options by** | **Form order** keeps the order of the choices in the form. **Most matches first** puts the options with the highest counts at the top. | | **Collapse long lists behind a toggle** | Shows the first few options and a **Show more** link. **Options shown before collapsing** sets how many appear (5 by default). | ### Display types | Display as | Best for | |---|---| | **Checkboxes** | Letting visitors pick several options. Entries that match any of the ticked options appear. | | **Radio buttons** | One option at a time, with every option visible. | | **Dropdown** | One option at a time, when space in the sidebar is tight. | | **Searchable dropdown** | Long lists. Visitors type to find an option, and the choices load as they type. | | **Range** | Number fields such as prices or sizes. Visitors drag a slider or type a minimum and maximum. | | **Star rating** | Ratings. Visitors pick a minimum, such as "4 stars and up." | ### Range filter settings A **Range** filter has its own settings in place of the options settings. ![The settings for a Price range filter: Range type, Minimum value, Maximum value, Step, Show number inputs, Format numbers with thousands separators and Unit prefix.](https://www.gravitykit.com/wp-content/uploads/2026/10/live-filters-range-filter-settings.png)| Setting | What it does | |---|---| | **Range type** | **Minimum and maximum** shows two handles. **Maximum only** shows one, for filters such as "Up to $500." | | **Minimum value** and **Maximum value** | The ends of the slider. Leave them empty to use the lowest and highest values in the View. | | **Step** | How far the slider moves at a time. Leave it empty to fit the slider to the field's values. | | **Show number inputs** | Adds boxes where visitors can type the numbers. | | **Format numbers with thousands separators** | Shows 1,500,000 rather than 1500000. Turn it off for values such as years. | | **Unit prefix** and **Unit suffix** | Text shown before or after the value, such as `$` or `km`. | ## Step 4: Save and test Click **Update** to save the View, then open the page where the View is embedded. Tick an option and check that the results narrow and the counts in the other filters change. In the example below, choosing **Cafe** leaves 22 results, and the **Neighborhood** filter now counts only cafes. ![The same directory with Cafe ticked. The header reads 22 results with a Reset filters link, and the Neighborhood counts have dropped to match the cafes.](https://www.gravitykit.com/wp-content/uploads/2026/10/live-filters-front-end-filtered.png) ## How visitors use Live Filters - **Counts before they click.** Each option shows how many entries match, based on the other filters already chosen. - **Several options in one filter.** Ticking two boxes in the same filter shows entries that match either one. - **Several filters together.** Choices in different filters combine, so entries have to match all of them. - **Reset filters** clears every choice at once. - **Shareable links.** The page address updates with the filters, so a visitor can bookmark or share a filtered list. - **Phones.** On small screens the sidebar folds away, and visitors open it with **Show filters**. ## Using Live Filters with the search bar A View can show the search bar and Live Filters together. A keyword search in the search bar narrows the entries, and the count on every filter option updates to match. Choosing filters then narrows those results further, and the page link keeps both. ## Layouts that work with Live Filters Live Filters works with Views in the Table, List and Layout Builder layouts, DataTables, Maps (the pins follow the filters) and DIY layouts, and with Views that use Multiple Forms to join entries from more than one form. ## Related articles - [Configuring the Search Bar widget](https://www.gravitykit.com/docs/gravityview/search/configuring-the-search-bar/) - [Getting started: setting up your first View](https://www.gravitykit.com/docs/gravityview/getting-started/how-to-setup-your-first-view/) - [Connecting Views with Connected Views](https://www.gravitykit.com/docs/gravityview-pro/connected-views/connecting-views-with-connected-views/)