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

# ConstraintsBar

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

> Collapse wrapper. A `grid-template-rows` animation (0fr to 1fr) reveals or hides the band at the canonical interaction duration; the SFC sets the row value inline. Disabled under reduced-motion.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [collapse](/v3/reference/theming/keys/ConstraintsBar.md#theme-key-ConstraintsBar-collapse) | 3 classes | Collapse wrapper. A `grid-template-rows` animation (0fr to 1fr) reveals or hides the band at the canonical interaction duration; the SFC sets the row value inline. Disabled under reduced-motion. |
| [inner](/v3/reference/theming/keys/ConstraintsBar.md#theme-key-ConstraintsBar-inner) | `overflow-hidden min-h-0` | Clipping wrapper inside the collapse grid; hides the band content while the row collapses to zero height. |
| [root](/v3/reference/theming/keys/ConstraintsBar.md#theme-key-ConstraintsBar-root) | 2 classes | The band wrapper. A single flex row that the hosted scope, filter, and sort groups flow into. |
| [divider](/v3/reference/theming/keys/ConstraintsBar.md#theme-key-ConstraintsBar-divider) | `h-5 w-hairline self-center bg-border` | Hairline divider between two active groups. |

<a id="theme-key-ConstraintsBar-collapse"></a>

## collapse

> Collapse wrapper. A `grid-template-rows` animation (0fr to 1fr) reveals or hides the band at the canonical interaction duration; the SFC sets the row value inline. Disabled under reduced-motion.

Default classes:

```text
grid transition-[grid-template-rows]
duration-[var(--vueda-duration-interaction)] ease-[var(--vueda-ease-interaction)]
motion-reduce:transition-none
```

Source: `client/lib/theme/vueda-tailwind/display/ConstraintsBar.theme.js:18`

<a id="theme-key-ConstraintsBar-inner"></a>

## inner

> Clipping wrapper inside the collapse grid; hides the band content while the row collapses to zero height.

Default classes:

`overflow-hidden min-h-0`

Source: `client/lib/theme/vueda-tailwind/display/ConstraintsBar.theme.js:26`

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

## root

> The band wrapper. A single flex row that the hosted scope, filter, and sort groups flow into.

Default classes:

```text
w-full flex flex-wrap items-center gap-x-3 gap-y-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/display/ConstraintsBar.theme.js:30`

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

## divider

> Hairline divider between two active groups.

Default classes:

`h-5 w-hairline self-center bg-border`

Source: `client/lib/theme/vueda-tailwind/display/ConstraintsBar.theme.js:37`