---
title: "Filter chips"
description: "FilterChips: one choice among a few, above a list, with \"All\" first and optional counts; the chosen chip inverts. FilterToggle: one on/off filter such as including inactive records."
---

> 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.

# Filter chips

## One choice

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

const StatusExample = () => {
  const [status, setStatus] = useState<'confirmed' | 'pending' | 'cancelled' | null>(null);
  return (
    <FilterChips
      label="Appointment status"
      onChange={setStatus}
      options={[
        { label: 'Confirmed', value: 'confirmed', count: 42 },
        { label: 'Pending', value: 'pending', count: 7 },
        { label: 'Cancelled', value: 'cancelled', count: 3 },
      ]}
      value={status}
    />
  );
};

<StatusExample />
```

## An on/off filter

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

const InactiveExample = () => {
  const [showInactive, setShowInactive] = useState(false);
  return <FilterToggle count={5} isSelected={showInactive} label="Inactive" onChange={setShowInactive} />;
};

<InactiveExample />
```

## Source

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

Source: https://epidermis.getarbol.com/components/collections/filter-chips/index.mdx