HabSortMenu

How a list is ordered: a text button naming the order, with an arrow for its direction. Pick an order from its menu; pick the active one again to reverse it.

Sort

1. Billing · 9
2. Offboarding · 1
3. Onboarding · 4

Pick an order; pick it again to reverse it

<HabSortMenu
	v-model="sort"
	v-model:reversed="reversed"
	label="Sort"
	reverse-hint="Click again to reverse"
	reversed-label="reversed"
	:options="[
		{ value: 'name', label: 'Name' },
		{ value: 'size', label: 'Activities' },
	]"
/>

How it behaves

• The trigger names the active order, so the list says how it is sorted without opening anything. The arrow points down for the order's own direction and up when it is reversed.
• Picking the active order again reverses it, the way a table header does. It emits update:reversed.
• Picking another order starts it in its own direction. It emits update:modelValue, and update:reversed with false if the list was reversed: a reversal carried silently into another order is a surprise.
• What "its own direction" is, is the list's to say. The component only reports the choice; A–Z, biggest first or most recent first is decided where the list is sorted.

Which control

You are choosing…	Use
the order a list is shown in	HabSortMenu
which rows a list shows — a mode, a few words each	HabSegmented
which rows a list shows — one of many	HabSelect
several facets at once	HabChip

Caption

label draws a caption before the trigger in the caps a toolbar's filter captions use, and names the control: the trigger is announced as "Sort: Name". Where a heading already says what is sorted — a panel's field title — leave it out; the trigger's text names the order.

Accessibility

• The orders are one menuitemradio choice inside HabMenu, so a screen reader hears which order is on and what the alternatives are.
• The trigger's accessible name is label: order when there is a label, otherwise its text or your aria-label. A label wins over an aria-label.
• Pass reversedLabel, or the direction is never announced. The arrow is decorative, and reversing does not change which item is checked. While the order is reversed the string is added to the name — "Sort: Name, reversed". Habitus ships no default text; translate it.
• reverseHint is shown at the end of the active order's row, so it is read with that row, by keyboard and screen reader alike. Habitus ships no default text: the string is the host application's to translate.

Layout

class and style go on the root, which is what a parent lays out — class="ms-auto" pushes the whole control, caption included, to the end of a row. Every other attribute, aria-label and data- hooks included, goes on the trigger button.

API

Props

Prop	Type	Default	Description
align	"left" | "right"	"right"	Which edge of the trigger the menu lines up with.
label	string	undefined	A caption before the trigger, in the caps a toolbar's filter captions use — "Sort". Also the control's accessible name, with the active order: "Sort: Name". Omit it where a heading already says what is sorted; then pass aria-label instead.
modelValue	string	undefined	The active order, for v-model.
options	(string | HabSortMenuOption)[]	[]	The orders, in menu order, or plain strings where the value and the label are the same.
reversed	boolean	false	Whether the active order runs against its own direction, for v-model:reversed.
reversedLabel	string	undefined	Added to the trigger's accessible name while the order is reversed — "reversed" makes it "Sort: Name, reversed". The arrow is decorative, so without this a screen reader is never told the direction. No default: the string is the host application's to translate.
reverseHint	string	undefined	Says that picking the active order again reverses it — "Click again to reverse". Shown at the end of the active order's row in the menu. No default: the string is the host application's to translate. Omitted, the row shows nothing there.

Events

Event	Payload	Description
update:modelValue	value: string	—
update:reversed	reversed: boolean	—