Tabs

Preview Code

375 768 Full

Open

html

<div class="aparte-tabs aparte-tabs--underline" role="tablist" aria-label="Result view">
  <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-u-preview" aria-controls="tabs-u-preview-panel" aria-selected="true" tabindex="0">Preview</button>
  <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-u-code" aria-controls="tabs-u-code-panel" aria-selected="false" tabindex="-1">Code</button>
</div>
<div class="aparte-tabs__panel" role="tabpanel" id="tabs-u-preview-panel" aria-labelledby="tabs-u-preview">What the selected tab shows.</div>
<div class="aparte-tabs__panel" role="tabpanel" id="tabs-u-code-panel" aria-labelledby="tabs-u-code" hidden>What the other tab shows.</div>
<div class="aparte-tabs aparte-tabs--segmented" role="tablist" aria-label="Theme">
  <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-s-light" aria-controls="tabs-s-light-panel" aria-selected="true" tabindex="0">Light</button>
  <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-s-dark" aria-controls="tabs-s-dark-panel" aria-selected="false" tabindex="-1">Dark</button>
  <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-s-system" aria-controls="tabs-s-system-panel" aria-selected="false" tabindex="-1">System</button>
</div>
<div class="aparte-tabs__panel" role="tabpanel" id="tabs-s-light-panel" aria-labelledby="tabs-s-light">The light theme's settings.</div>
<div class="aparte-tabs__panel" role="tabpanel" id="tabs-s-dark-panel" aria-labelledby="tabs-s-dark" hidden>The dark theme's settings.</div>
<div class="aparte-tabs__panel" role="tabpanel" id="tabs-s-system-panel" aria-labelledby="tabs-s-system" hidden>Whatever the system asks for.</div>

Two looks, one behaviour. --underline marks the current tab with a rule beneath it, the quieter of the two, for switching views; --segmented puts the row in a track and fills the current tab, which reads as a control. The artifact card’s Code and Preview are underlined tabs; this site’s theme switch is segmented.

The recipe draws the state; aria-selected says which tab is current, and your code sets it.

Usage

The markup of the tab pattern is the whole contract: one tab stop for the row (tabindex="0" on the selected tab, -1 on the others), aria-controls from each tab to its role="tabpanel", and aria-labelledby back. Moving between tabs with the arrow keys is your script’s; the artifact plugin’s card does it in a few lines.

Customize

It reads only the theme’s shared tokens, listed on the CSS variables reference.

Classes

.aparte-tabs · .aparte-tabs--segmented · .aparte-tabs--underline · .aparte-tabs__panel · .aparte-tabs__tab

Accessibility

• Use role="tablist", role="tab" and role="tabpanel" with the attributes above, and the arrow keys between tabs: that is what a screen reader announces and expects.
• Hide the panels that are not selected with hidden.

Related

• Accordion — several sections open at once, stacked.
• Artifact — tabs in a card.