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

# SortChip

## Overview

Renders a single active sort field as a removable pill. A leading priority
ordinal (shown only when `showOrdinal` is set) doubles as the drag handle for
reordering within the host strip. The label segment shows the field's human
label and a direction glyph; clicking it toggles ascending/descending. The
trailing segment removes the field from the sort, and is present only when
`removable` is set. This is the sort-side
counterpart to [FilterChip](/v3/reference/api/vue/FilterChip.md): neutral-tinted, since ordering
is not a predicate and the accent is reserved for filters, actions, and selection.

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

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-iconOverride">iconOverride</span> | `Object` |  | `null` | A partial icon registry (`{ [componentName]: { [iconName]: { component, props } } }`) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants. |
| <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-field">field</span> | `string` | yes |  | Sort entry to render, e.g. `"updated"` (ascending) or `"-updated"` (descending). |
| <span id="prop-index">index</span> | `number` | yes |  | Zero-based position in the sort order; the displayed priority ordinal is `index + 1`. |
| <span id="prop-fieldDetails">fieldDetails</span> | `object` |  | `{}` | Map of field name to field metadata (e.g. `{ label }`) used to derive the human label. |
| <span id="prop-showOrdinal">showOrdinal</span> | `boolean` |  | `true` | Show the priority ordinal. The ordinal doubles as the drag handle, so it is shown only when reordering is meaningful (more than one active sort field). The host strip ([SortGroup](/v3/reference/api/vue/SortGroup.md)) passes `false` for a lone chip. |
| <span id="prop-removable">removable</span> | `boolean` |  | `true` | Show the remove ("x") control. The host strip ([SortGroup](/v3/reference/api/vue/SortGroup.md)) passes `false` for a lone chip, so the last active sort field can't be removed from the chip itself — clearing it would leave the strip with no chips to read the sort from, while the server would still sort by its own default. Reset sort is the way back instead. |

## Slots

| Name | Scoped | Description |
| --- | --- | --- |
| `drag-handle` |  | Override the drag-handle glyph. |

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

## Events

| Name | Description |
| --- | --- |
| `toggle` | Emitted when the label segment is clicked to flip this field's direction. |
| `remove` | Emitted when the remove segment is clicked. |

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

## Source

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