---
url: "https://vueda.dev/v3/reference/theming/keys/FilterGroup.md"
title: "FilterGroup"
---

# FilterGroup

Source: `client/lib/theme/vueda-tailwind/form/index.js`

> Root wrapper. `contents` so it adds no box of its own: the teleported menu trigger and the chips strip flow as direct children of the list layout.

Vue component: [FilterGroup](/v3/reference/api/vue/FilterGroup.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/FilterGroup.md#theme-key-FilterGroup-root) | `contents` | Root wrapper. `contents` so it adds no box of its own: the teleported menu trigger and the chips strip flow as direct children of the list layout. |
| [strip](/v3/reference/theming/keys/FilterGroup.md#theme-key-FilterGroup-strip) | 2 classes | Active-filter chips strip. Muted tint a tier below the card-toned toolbar; only rendered when filters are active. Shares the `px-5 py-[10px]` page-chrome rhythm and carries a bottom hairline. |
| [subgroup](/v3/reference/theming/keys/FilterGroup.md#theme-key-FilterGroup-subgroup) | `flex flex-wrap items-center gap-2` | Bare chips group used when hosted inside a shared ConstraintsBar: the band chrome (border, tint, padding) belongs to the host, so this carries only the flex layout for the eyebrow and chips. |
| [eyebrow](/v3/reference/theming/keys/FilterGroup.md#theme-key-FilterGroup-eyebrow) | 2 classes | "Filters" eyebrow at the left of the chips strip. 11 px / 600 / 0.06em uppercase against `--muted-foreground`. |
| [clear](/v3/reference/theming/keys/FilterGroup.md#theme-key-FilterGroup-clear) | `ml-auto text-xs` | Clear-all control, pushed to the right edge of the chips strip. |
| [messageWrapper](/v3/reference/theming/keys/FilterGroup.md#theme-key-FilterGroup-messageWrapper) | `w-full flex my-2` | Error message area, rendered only when a list filter error is present (so it reserves no margin when empty). |

<a id="theme-key-FilterGroup-root"></a>

## root

> Root wrapper. `contents` so it adds no box of its own: the teleported menu trigger and the chips strip flow as direct children of the list layout.

Default classes:

`contents`

Source: `client/lib/theme/vueda-tailwind/form/FilterGroup.theme.js:19`

<a id="theme-key-FilterGroup-strip"></a>

## strip

> Active-filter chips strip. Muted tint a tier below the card-toned toolbar; only rendered when filters are active. Shares the `px-5 py-[10px]` page-chrome rhythm and carries a bottom hairline.

Default classes:

```text
w-full flex flex-wrap items-center gap-2 px-5 py-[10px]
border-b-hairline bg-[color-mix(in_oklab,var(--muted)_25%,var(--card))] text-foreground
```

Source: `client/lib/theme/vueda-tailwind/form/FilterGroup.theme.js:23`

<a id="theme-key-FilterGroup-subgroup"></a>

## subgroup

> Bare chips group used when hosted inside a shared ConstraintsBar: the band chrome (border, tint, padding) belongs to the host, so this carries only the flex layout for the eyebrow and chips.

Default classes:

`flex flex-wrap items-center gap-2`

Source: `client/lib/theme/vueda-tailwind/form/FilterGroup.theme.js:30`

<a id="theme-key-FilterGroup-eyebrow"></a>

## eyebrow

> "Filters" eyebrow at the left of the chips strip. 11 px / 600 / 0.06em uppercase against `--muted-foreground`.

Default classes:

```text
text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em]
text-muted-foreground leading-none
```

Source: `client/lib/theme/vueda-tailwind/form/FilterGroup.theme.js:34`

<a id="theme-key-FilterGroup-clear"></a>

## clear

> Clear-all control, pushed to the right edge of the chips strip.

Default classes:

`ml-auto text-xs`

Source: `client/lib/theme/vueda-tailwind/form/FilterGroup.theme.js:41`

<a id="theme-key-FilterGroup-messageWrapper"></a>

## messageWrapper

> Error message area, rendered only when a list filter error is present (so it reserves no margin when empty).

Default classes:

`w-full flex my-2`

Source: `client/lib/theme/vueda-tailwind/form/FilterGroup.theme.js:45`