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

# FilterChip

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

> Pill container. Primary tint at rest; destructive tint flags a value the server rejected.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/FilterChip.md#theme-key-FilterChip-root) | callback | Pill container. Primary tint at rest; destructive tint flags a value the server rejected. |
| [label](/v3/reference/theming/keys/FilterChip.md#theme-key-FilterChip-label) | callback | Label segment: clicking it opens the edit popover. Carries the left pill radius. Stretches to the chip's full height so the hover target covers the full pill height. |
| [divider](/v3/reference/theming/keys/FilterChip.md#theme-key-FilterChip-divider) | callback | Hairline divider between the label and the remove control. |
| [remove](/v3/reference/theming/keys/FilterChip.md#theme-key-FilterChip-remove) | callback | Remove segment (the trailing dismiss control). Carries the right pill radius. Stretches to the chip's full height so the hover target matches the label segment. |
| [popover](/v3/reference/theming/keys/FilterChip.md#theme-key-FilterChip-popover) | `sm:min-w-[25%]` | Edit-popover surface width floor for the embedded filter form. |

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

## root

> Pill container. Primary tint at rest; destructive tint flags a value the server rejected.

Callback:

```javascript
({ errored }) => [
                "inline-flex items-center rounded-full hairline text-xs font-semibold",
                errored
                    ? "[--vueda-hairline-color:color-mix(in_oklab,var(--destructive)_40%,transparent)] bg-destructive/10 text-destructive"
                    : "[--vueda-hairline-color:color-mix(in_oklab,var(--primary)_30%,transparent)] bg-primary/10 text-primary-text",
            ]
```

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

<a id="theme-key-FilterChip-label"></a>

## label

> Label segment: clicking it opens the edit popover. Carries the left pill radius. Stretches to the chip's full height so the hover target covers the full pill height.

Callback:

```javascript
({ errored }) => [
                "inline-flex items-center self-stretch gap-1.5 rounded-l-full py-1 pl-2.5 pr-2",
                errored ? "hover:bg-destructive/15" : "hover:bg-primary/15",
            ]
```

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

<a id="theme-key-FilterChip-divider"></a>

## divider

> Hairline divider between the label and the remove control.

Callback:

```javascript
({ errored }) => ["h-4 w-hairline", errored ? "bg-destructive/30" : "bg-primary/30"]
```

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

<a id="theme-key-FilterChip-remove"></a>

## remove

> Remove segment (the trailing dismiss control). Carries the right pill radius. Stretches to the chip's full height so the hover target matches the label segment.

Callback:

```javascript
({ errored }) => [
                "inline-flex items-center self-stretch rounded-r-full px-1.5 py-1 opacity-70 hover:opacity-100",
                errored ? "hover:bg-destructive/15" : "hover:bg-primary/15",
            ]
```

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

<a id="theme-key-FilterChip-popover"></a>

## popover

> Edit-popover surface width floor for the embedded filter form.

Default classes:

`sm:min-w-[25%]`

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