Content switcher

A segmented choice in a thin black border: two or more views of the same content, one at a time. The chosen option is filled black. Used for /mo /yr and for tabs. Named Switch until 3.0.0.

Sizes

Small is the default. Medium (.sys-content-switcher--md) is 40px tall, the same as a text input, for a switcher that sits in a row with a search or text field.

As tabs

Stipulations

• Use aria-pressed for a toggle and role="tab" + aria-selected for tabs; the styles follow those attributes.
• Tabs never scroll sideways. On phones the options split the width evenly and labels may wrap.
• No underline tabs and no accent on the chosen option: the black fill is the one active state.
• A count sits after the label in body type.
• Match the row. Beside a text field, use medium so the two are the same height (40px). Everywhere else, small. Don’t stretch a switcher to fit anything else.
• Content switcher or toggle? Choosing between named views (per month or per year, Planner or Portfolio) is a content switcher. Turning one setting on or off is a toggle.
• Classes: .sys-content-switcher and .sys-content-switcher--tabs. The old .sys-switch names still work as deprecated aliases; use the new ones in new work.