Segmented Control
One value from a few, as joined segments: a view (Day, Week, Month), a period (Monthly, Yearly), an alignment. It is a radio group: the chosen option is a form value, and it works without scripting. Specification: docs/components/segmented-control.md
Tab reaches the chosen option; the arrow keys choose the next one, as in any radio group.
Basics
A role="radiogroup" on the .canon-segmented, named by aria-label (or aria-labelledby). Each option is a <label class="canon-segmented-option"> around its radio and a .canon-segmented-label. One option is always chosen: checked on one radio.
In a field
In a Field, the group takes the box's place and is named by the field's label: a <span id> the group points at with aria-labelledby. A description is linked with aria-describedby on the group.
Yearly billing saves two months.
Icons
An icon before the text: a canon-icon with aria-hidden="true", after the radio. With data-display="icon" on the group or a container, only the icons show and the options are square; the text stays, hidden, as each option's name.
Size
data-size on the group or a container: 32 / 40 / 48 tall, a button's height.
Disabled
disabled on a radio: that option can't be chosen and the arrow keys skip it. On every radio (or a disabled <fieldset> around the group), the whole control is disabled and keeps showing its value.
Segmented Control or…
Each is "one of these" in a way; what they do differs.
- Tabs switch between panels of content, each its own (General, Billing, Members). A Segmented Control sets a value for the same content (the same calendar by day, week or month).
- Button Group toggles (
aria-pressed) change the interface right away and aren't form values (bold, italic). A Segmented Control's value is submitted with its form. - Radio buttons suit longer labels, descriptions, more than about five options, or a choice with no default.
Edge cases
Too narrow a place: the options shrink and cut their text (…); each keeps its full name. Drag the frame's corner to try it.
Right to left, the options run from the right.