---
title: "FoldingFilters"
description: "A list’s filters folded behind one “Filters · n” button on a phone; from the sm breakpoint they sit in the filter row. Narrow the window to see it fold."
---

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

# FoldingFilters

## A contacts filter row

```tsx
import { useState } from 'react';
import { FilterSelect, FoldingFilters } from '@arbol-ai/ui';

const FoldingExample = () => {
  const [channels, setChannels] = useState<readonly string[]>([]);
  const [agents, setAgents] = useState<readonly string[]>(['front-desk']);
  return (
    <div className="flex flex-wrap items-center gap-2">
      <FoldingFilters activeCount={(channels.length > 0 ? 1 : 0) + (agents.length > 0 ? 1 : 0)}>
        <FilterSelect
          label="Channel"
          onChange={setChannels}
          options={[
            { value: 'phone', label: 'Phone' },
            { value: 'whatsapp', label: 'WhatsApp' },
          ]}
          value={channels}
        />
        <FilterSelect
          label="Agent"
          onChange={setAgents}
          options={[
            { value: 'front-desk', label: 'Front desk' },
            { value: 'reminders', label: 'Reminders' },
          ]}
          value={agents}
        />
      </FoldingFilters>
    </div>
  );
};

<FoldingExample />
```

## Source

The examples above are [`src/components/folding-filters/folding-filters.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/folding-filters/folding-filters.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/data/folding-filters/index.mdx