Open experiment
Compact tabs strip
A compact tab component with linked tab and tabpanel semantics, arrow-key navigation, and a restrained Coding Laboratory visual treatment.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<section class="cmp-tabs">
<div role="tablist" aria-label="Component source">
<button
id="cmp-tab-html"
role="tab"
aria-selected="true"
aria-controls="cmp-panel-html"
tabindex="0"
>
HTML</button
><button
id="cmp-tab-css"
role="tab"
aria-selected="false"
aria-controls="cmp-panel-css"
tabindex="-1"
>
CSS</button
><button
id="cmp-tab-js"
role="tab"
aria-selected="false"
aria-controls="cmp-panel-js"
tabindex="-1"
>
JavaScript
</button>
</div>
<div id="cmp-panel-html" role="tabpanel" aria-labelledby="cmp-tab-html">
Semantic markup ready to copy.
</div>
<div id="cmp-panel-css" role="tabpanel" aria-labelledby="cmp-tab-css" hidden>
Scoped custom properties and styles.
</div>
<div id="cmp-panel-js" role="tabpanel" aria-labelledby="cmp-tab-js" hidden>
Optional defensive behavior.
</div>
</section>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- Tabs and panels are programmatically linked.
- Arrow keys move between tabs.
- Only the active tab is in the sequential tab order.
License: MIT License for open-source use, modification, and distribution.