Tabs
The WAI-ARIA tabs pattern with automatic activation: Left and Right (wrapping), Home and End move and select, and only the selected tab is in the tab order. xo-tab is the label; the section's id is its key. Panels are hidden, not removed, so their form fields stay in the form. The code tabs on this page are made with it.
General settings: title, slug, author.
Search engine settings. This tab is selected by value="seo".
How the page looks when it is shared.
Selected:
<xo-tabs id="demo-tabs" label="Article" value="seo">
<section xo-tab="General"><p>General settings: title, slug, author.</p></section>
<section xo-tab="SEO" id="seo"><p>Search engine settings. This tab is selected by <code>value="seo"</code>.</p></section>
<section xo-tab="Social"><p>How the page looks when it is shared.</p></section>
</xo-tabs>
<p class="hint">Selected: <output id="tabs-out">seo</output></p>// The tabs page: show what the control reports.
// `xo-tab-change` carries the selected key (the section's id, or its position).
document.querySelector('#demo-tabs').addEventListener('xo-tab-change', (e) => {
document.querySelector('#tabs-out').textContent = e.detail.value;
});| API | What it does |
|---|---|
value, tabs.select(key) | Select a tab by key (its id, or its position) |
xo-tab-change | Fires with { value } |
xo-reveal | A form fires it when an invalid field is on another tab; the tab is selected first |
data-invalid | Set on a tab whose panel has an aria-invalid control |