---
url: "https://vueda.dev/v3/reference/api/vue/ConstraintsBar.md"
title: "ConstraintsBar"
---

# ConstraintsBar

## Overview

The active list-constraints band: one strip that hosts the scope chips, the
filter chips, and the sort chips on a single line, with a hairline divider
between each pair of active groups. The groups are told apart by their own
tint (info for scopes, primary for filters, neutral for sorts), so the band
reads as grouped categories rather than one undifferentiated pile. Each group
owns its own clear control.

Presentational only: the host supplies the chip groups via the `scopes`,
`filters`, and `sort` slots and tells the band which groups are active. The
band collapses (height 0) when nothing is active, so an unconstrained list
spends no vertical chrome. The chip groups stay mounted (the band is clipped,
not unmounted) so their toolbar triggers keep working while the band is
collapsed.

Theme entry: [ConstraintsBar](/v3/reference/theming/keys/ConstraintsBar.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-scopesActive">scopesActive</span> | `boolean` |  | `false` | True when one or more scopes are active; drives the dividers and band visibility. |
| <span id="prop-filtersActive">filtersActive</span> | `boolean` |  | `false` | True when one or more filters are active; drives the dividers and band visibility. |
| <span id="prop-sortsActive">sortsActive</span> | `boolean` |  | `false` | True when one or more sort fields are active; drives the dividers and band visibility. |

## Slots

| Name | Scoped | Description |
| --- | --- | --- |
| `scopes` |  | The scope chips group (ScopeGroup in hosted mode). |
| `filters` |  | The filter chips group (FilterGroup in hosted mode). |
| `sort` |  | The sort chips group (SortGroup in hosted mode). |

[Full slot reference](/v3/reference/api/vue/ConstraintsBar/slots.md)

## Source

`client/lib/display/constraints-bar/ConstraintsBar.vue`