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

# ScopeGroup

## Overview

Renders a list's active scopes as a strip of [ScopeChip](/v3/reference/api/vue/ScopeChip.md)s,
plus a Clear scopes control when more than one clearable scope is active. A scope is a
list constraint supplied by a link or by application code that has no editable
input: the chips describe it and offer removal, and the add-filter menu never
offers it. The scope-side counterpart to [FilterGroup](/v3/reference/api/vue/FilterGroup.md)'s chips.

Presentational only: the group reports which scopes the reader asked to clear,
and the host removes their values.

Theme entry: [ScopeGroup](/v3/reference/theming/keys/ScopeGroup.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-scopes">scopes</span> | `array` |  | `[]` | Active scopes, each `{ name, label, keys, source, clearable }`; `name` and `source` together identify a scope. |
| <span id="prop-hosted">hosted</span> | `boolean` |  | `false` | When true, the chips render as a bare subgroup (no band chrome) for hosting inside a shared [ConstraintsBar](/v3/reference/api/vue/ConstraintsBar.md). When false (default), the chips render as a self-contained strip. |

## Slots

| Name | Scoped | Description |
| --- | --- | --- |
| `scope-chip` | yes | Replaces one whole scope chip. Slot props: `scope`, and `clear()`, which asks to clear that scope when it is clearable. |
| `scope-label` | yes | Replaces a scope chip's label text, keeping the chip and its clear control. Slot props: `scope`. |

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

## Events

| Name | Description |
| --- | --- |
| `clear` | Emitted with the array of scope objects the reader asked to clear: one from a chip, every clearable scope from Clear scopes. |

[Full event reference](/v3/reference/api/vue/ScopeGroup/events.md)

## Source

`client/lib/display/scope/ScopeGroup.vue`