GrSegmented

<GrSegmented v-model="view" :options="options" aria-label="List view" />

An option is { value, label?, icon?, disabled?, loading?, ariaLabel? }. The icon is decorative (aria-hidden), so an icon-only segment requires ariaLabel: otherwise it has no name at all.

The default slot replaces the content of a segment and receives { option, selected, disabled, loading }.

{ value: 'review', label: 'Review', loading: syncing }

loading shows a spinner in place of the icon and marks the segment aria-busy. It does not accept the selection, and the arrows step over it — as they do over a disabled one.

The difference from disabled is one of meaning, and it is visible to a screen reader: a busy segment does not get aria-disabled and the native disabled — it is available, it is simply working right now. An unavailable one gets both.

readonly shows the selection but does not let it be changed — neither by a click nor from the keyboard; the group is announced aria-readonly. disabled dims the whole control.

Both states are dimmed with the --gr-disabled-fg token rather than with transparency: opacity dilutes text colours tuned to AA.

invalid — its own or one coming from a GrFormField error — paints the border of the track and the focus ring with the error roles (--gr-invalid-brd, --gr-invalid-ring), as the input fields and GrRadioGroup do, and sets aria-invalid. A border colour of your own goes through --gr-segmented-invalid-brd.

The value leaves in a single hidden field beside the segments (name) rather than nested into every role="radio": the role declares its descendants presentational, and a nested interactive control breaks the widget for screen readers. An unavailable selected segment does not send the value.

block stretches the row across the container, and itemWidth decides how it divides the width:

<GrSegmented v-model="filter" :options="filters" item-width="content" block />

Equal tracks in a 400 px drawer give three cells of 121 px: the word “All” does not need that much, while “With documents” does not fit and is cut with an ellipsis — even though in total there is enough room. content lays it out where it is needed.

The default does not change, and that is deliberate. With content the width of the row depends on the length of the labels, and translating the interface would move the segment boundaries for every consumer at once.

Technically the mode is a minmax(0, auto) track. While there is enough room, the segments get the width of their content, and the remainder is divided equally on top. When there is not, the tracks shrink: short labels stay whole, while long ones share the remainder and go into an ellipsis with the full text in title. The row never becomes wider than the container.

The minimum of the track is zero rather than min-content: the label is single-line, and its min-content equals its max-content — with such a minimum the track did not shrink at all, and the row pushed the card around it past its edge.

Without block and in the vertical direction the prop means nothing: there the width follows the content anyway, and there is a single column.

The track is a pill, and that is the default: that is how segments have always looked. The second value is box, the same rounding as the input fields have: in a form beside a GrSelect a pill reads as a guest from another system.

<GrSegmented v-model="view" :options="options" shape="box" />

The radius of a segment inside the track is derived (calc(radius − track padding)), so the second shape comes out by itself and needs no separate setting.

In the vertical direction the pill is computed by a formula rather than taking 9999px: on a tall column such a radius would turn the track into an ellipse, so it equals the height of one segment. box knows nothing of that correction — 6 px does not become an ellipse.

The axis is shared with the input fields — ../sizes.md.

Pointed customisation goes through --gr-segmented-* (the radius, the padding, the colours of the track and of the indicator, the type size).

The label of a segment does not wrap: the row is obliged to stay a row. The tail that does not fit is hidden with an ellipsis, and “Included in the subscription” turns into “Included in…”.

The full text does not go anywhere in the process: truncate is a rendering rule, in the DOM the string stays whole, and a screen reader reads it in full. It is lost by exactly one reader — the one looking with their eyes — and to them the label is given with a native hint on hover. The hint appears only when the text really is truncated: a tooltip duplicating a label that is fully visible is noise nobody asked for.

The same handler is available from the outside — titleWhenTruncated from the package, for markup of your own with truncate.

<GrSegmented v-model="scope" :options="filters" orientation="vertical" block />

The typical scenario is side filters. The row unfolds into a column, and the root announces aria-orientation.

The content of a segment in a column sits at the start rather than in the centre: centred labels and icons of different lengths formed a ragged line, and the column read as a menu rather than a list. In a horizontal row a segment is still centred — there it reads as a button. The indicator island does not depend on the alignment: it measures the segment itself and covers it entirely.

The indicator needed nothing for that: it is measured in two dimensions (translate3d plus width/height) and travels downwards exactly as it does along a row. Changing the orientation on the fly recomputes the geometry — otherwise the indicator would stay in the coordinates of the previous layout.

In the vertical direction there is one column, so the segments are of equal width by construction, and block decides only whether to take up the width of the container.

The radius of the track in the vertical direction is computed from the height of a segment rather than taken as a pill: 9999px is tuned for a short row and on a tall column would turn the track into an ellipse. The segments inside remain pills in the process — they compute their radius from the same value.

←/↑ and →/↓ move the selection with a wrap over the edge, and Home/End go to the first and the last available segment. Unavailable and busy ones are skipped.

Both axes work in any orientation — that is what the APG requires for a radiogroup: a vertical row does not switch the horizontal arrows off and vice versa.