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

# SortControl

## Overview

Toolbar entry point for multi-field sorting. The trigger opens an add-field
menu of the sortable fields not yet in the sort, presented by
[ResponsiveMenu](/v3/reference/api/vue/ResponsiveMenu.md) (a popover on desktop, a full-screen dialog
on mobile). Picking a field appends it to the sort; the menu stays open so
several fields can be added in a row. Reordering, direction, and removal happen
on the active-sort chips (see [SortGroup](/v3/reference/api/vue/SortGroup.md) /
[SortChip](/v3/reference/api/vue/SortChip.md)), so this control is add-only. The trigger
teleports into a toolbar zone supplied by the host view. This is the
layout-independent companion to column-header sorting; both write the same
`sorted` array.

## 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-sortables">sortables</span> | `array` |  | `[]` | Array of field names that can be added as sort criteria. |
| <span id="prop-sorted">sorted</span> | `array` |  | `[]` | Currently active sort fields; prefix a field name with `-` to indicate descending order. |
| <span id="prop-fieldDetails">fieldDetails</span> | `object` |  | `{}` | Map of field name to field metadata (e.g. `{ label }`) used to derive human-readable labels. |
| <span id="prop-triggerTarget">triggerTarget</span> | `object\|string` |  | `null` | Element (or selector) the trigger teleports into. When falsy, the trigger renders in place. |
| <span id="prop-label">label</span> | `string` |  | `"Sort"` | Trigger label text. |

## Events

| Name | Description |
| --- | --- |
| `update:sorted` | Emitted when the active sort array changes. |

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

## Source

`client/lib/display/sort/SortControl.vue`