---
title: Filters
description: A filter bottom sheet composed from touchcn components.
---
import Source from './_generated/filters.mdx';

A filter sheet and its trigger: a sort radio group, selectable category chips, a
price-ceiling slider with a live readout, boolean option checkboxes and a sticky
footer with Reset and an Apply button that shows the active-filter count. The
selection is local state; `apply` emits the assembled filter state and `reset`
clears it back to defaults.

<DemoFrame component="blocks-filters" height={700} />

## Installation

```bash
npx touchcn add filters
```

This also adds the components the block composes:

`bottom-sheet` · `button` · `checkbox` · `chip` · `radio` · `slider`

## Usage

<CodeGroup>

```html Angular
<tcn-filters-block (apply)="applyFilters($event)" (reset)="clearFilters()" />
```

```tsx React
import { TcnFiltersBlock } from '@/components/blocks/filters';

<TcnFiltersBlock onApply={(state) => applyFilters(state)} onReset={clearFilters} />
```

```vue Vue
<script setup lang="ts">
import { TcnFiltersBlock } from '@/components/blocks/filters';
</script>

<template>
  <TcnFiltersBlock @apply="(state) => applyFilters(state)" @reset="clearFilters" />
</template>
```

</CodeGroup>

`apply` receives `{ sort, categories, maxPrice, freeShipping, inStock, onSale }`
and closes the sheet; `reset` clears every control and keeps the sheet open. The
Apply button and the trigger both surface the active-filter count.

Set `showBack` to render a back control in the navbar's leading slot; it emits
`back` (Angular) / `onBack` (React) when tapped — wire it to your router.

<Source />