Switcher

Preview Available in release assets

Switcher moves peer items onto separate rows together when space is tight. Five or more peers always stack. Use Cluster for independent actions that can wrap separately.

Switcher primary example

<ol class="thin-switcher" aria-label="Field trip steps">
  <li>Choose a route</li>
  <li>Reserve an accessible pickup location</li>
</ol>
<ol class="thin-switcher" aria-label="Five workshop steps">
  <li>Choose a date</li>
  <li>Confirm accessibility requirements</li>
  <li>Reserve a room</li>
  <li>Invite participants</li>
  <li>Share the meeting point</li>
</ol>
<div class="thin-cluster">
  <button class="thin-button" type="button">Save changes</button>
  <button class="thin-button" type="button" data-variant="quiet">Preview schedule</button>
</div>

Show code

<ol class="thin-switcher" aria-label="Field trip steps">
  <li>Choose a route</li>
  <li>Reserve an accessible pickup location</li>
</ol>
<ol class="thin-switcher" aria-label="Five workshop steps">
  <li>Choose a date</li>
  <li>Confirm accessibility requirements</li>
  <li>Reserve a room</li>
  <li>Invite participants</li>
  <li>Share the meeting point</li>
</ol>
<div class="thin-cluster">
  <button class="thin-button" type="button">Save changes</button>
  <button class="thin-button" type="button" data-variant="quiet">Preview schedule</button>
</div>

Anatomy

Element with thin-switcher class
Peer children

Variants and sizes

Row of peers
Stacked peers
Five or more peers

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Narrow container
Wide container
Long localized content
Right-to-left content

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

This layout owns no JavaScript behavior. Reading order, focus order, links, and scrolling stay native.

Accessibility

Layout changes position, never meaning. Keep source order logical, because it is the reading and focus order at every size.

Contract: PLATFORM
Basis: Native CSS layout and document defaults over semantic HTML; no APG widget

API

Add class=thin-switcher to a group of peers. They share one row while it is wide enough and all stack together when it is not; five or more peers always stack. Use Cluster for actions that can wrap independently.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Normal document flow remains readable if CSS is unavailable.

Assets and dependencies

/layouts.css

Dependencies: None

Source: packages/ui/src/style/layouts.ts

Composition

Derived from the examples and style specs, not authored.