# Accordion Filters block

> Collapsible ecommerce filter sidebar with accordion facets and active filter chips

Faceted product filter sidebar with collapsible accordion sections, price slider, color swatches, size and brand toggles, and removable active chips. ReUI Rating; shadcn Accordion, Card, Checkbox, Slider, Switch. For catalog, search, shop pages.

- Type: Pro block
- Category: [Filter Sidebar](https://web.dev.reui.io/blocks/ecommerce/filter-sidebar.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/filter-sidebar/filter-sidebar-6
- MCP: `get_block("filter-sidebar-6")`
- Built with: Accordion, Button, Card, Checkbox, Label, Radio Group, Rating, Separator, Slider, Switch
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Accordion sections with Category and Price open first, a solid count pill on triggers that hold picks, in a narrow Card

## Agent notes

- `Accordion` opens `category` and `price` through `defaultValue` and `multiple`; change that array to set the sections open on load
- The `SectionCount` pill counts selected picks, while the per facet `count` numbers beside each option are fixed sample values
- The Apply filters `Button` has no `onClick`; only Reset calls `handleClearAll`, so wire the facet state to your product query

## When not to use

- A navigation sidebar of page links with collapsible groups: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)
- A plain FAQ list of questions that open one answer at a time: use [Accordion](https://web.dev.reui.io/components/accordion.md) (`get_component("accordion")`)

## Install

```bash
npx shadcn@latest add @reui/filter-sidebar-6
```

## About Filter Sidebar blocks

### When to use

- A shop listing facet panel: category and brand counts, a price range, color swatches and size buttons
- Apparel catalogs narrowed further by department, material, star rating, stock or sale status
- Long facet lists folded into accordion sections, or moved into a side Sheet behind a Filters button

### When not to use

- A navigation sidebar of page links and a user menu around every screen of a product: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)
- A chip row of field, operator and value rules over results you already render: use [Filters](https://web.dev.reui.io/components/filters.md) (`get_component("filters")`)
- A back office records table that staff narrow by column, status or search: use the [Filtering blocks](https://web.dev.reui.io/blocks/data-grid/filtering.md)

### Agent notes

- Replace `CATEGORIES`, `BRANDS`, `COLORS`, `SIZES` and `PRICE_MAX` with your catalog; each facet `count` is a fixed number that never recounts
- `FilterSidebar` takes no props and the Apply filters `Button` has no `onClick`; lift its `useState` facets out to query your products
- Each block opens with demo picks such as `outerwear`, `northline`, `black` and a 40 to 180 `priceRange` already set; start them empty

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.