Tabs

Playground

A segmented tab bar with keyboard support. Labels come from a JSON attribute. Each panel is a slotted element whose slot is its label lowercased, with a hyphen for every run of anything but letters and digits: slot="docs" for "Docs", slot="self-host" for "Self-host", slot="übersicht" for "Übersicht". When two labels give the same slot ("C++" and "C#" both give c), the later one gets its index appended: c-1.

Examples

With panels

<sb-tabs labels='["Overview","Specs","Crew"]' style="inline-size: 100%">
  <p slot="overview">A light, fast shuttle built for orbital hops.</p>
  <p slot="specs">Payload 4t · Δv 9.4 km/s · 2 engines</p>
  <p slot="crew">Commander, pilot and one very good dog.</p>
</sb-tabs>

Follow the selection

The live index is the selected property, and input fires on every move (a click or an arrow key), so data-bind follows it with the __prop modifier. Declare the signal first; setting it selects a tab.

<div data-signals:_tab="1">
  <sb-tabs labels='["Home","Docs","API"]' data-bind:_tab__prop.selected></sb-tabs>
  <p>Selected index: <strong data-text="$_tab"></strong></p>
</div>

With commands

Give it a name, and it emits sb-change with { name, value, label } (value is the index) when the selection is committed: ready to post as a command (sb-tab-change fires at the same moment with { index, label }). A click commits at once; the arrow keys commit after a 250 ms pause, so running through the tabs sends one command, not one per tab (whose answers would pull the selection back one by one). With confirm, it sets :state(pending) until the server's re-rendered selected attribute matches, and revert() goes back to the server's value when a command is rejected. The panels are light DOM, so events from their content (a field's change, another component's sb-change) bubble through sb-tabs too: check evt.target === el. See Commands and components and the Showcase.

Styling

Style it from your page's CSS, without changing the component or importing anything into it. Custom properties, inherited properties and ::part() all reach into its shadow root.

• Fonts: the tab labels use your page's font.
• Colours: the strip is --sb-surface-inset with a --sb-border edge. Tabs are --sb-text-2 (--sb-text-1 on hover) with a --sb-border outline; the selected tab fills with --sb-brand-light and writes in --sb-bg. The focus ring is --sb-focus-ring, corners --sb-control-radius. When the tabs don't fit, the strip scrolls sideways with a thin --sb-border scrollbar, and the selected tab scrolls into view.
• Parts: tablist (the strip), tab (every tab) and panel (every panel). The selected tab is also selected, so ::part(tab selected) styles only that one; it moves with the selection. Your page's ::part() rules win over the component's own, without !important.

<style>
  .my-tabs { --sb-brand-light: var(--sb-accent); --sb-control-radius: 0; }
  .my-tabs::part(tab) { padding: 0.35rem 0.75rem; font-size: 0.8125rem; }
  .my-tabs::part(tab selected) { text-decoration: underline; }
</style>
<sb-tabs class="my-tabs" labels='["Orbit","Crew"]'>
  <p slot="orbit">Low Earth orbit, 420 km.</p>
  <p slot="crew">Commander, pilot and one very good dog.</p>
</sb-tabs>

Accessibility

It follows the WAI-ARIA tabs pattern: role="tablist", tab and tabpanel, a roving tabindex, and arrow keys, Home and End for navigation; in a right-to-left layout the arrows follow the mirrored strip. Name the tab list with aria-label on sb-tabs: it is forwarded to the tablist inside (the site's own install tabs say aria-label="Installation method"). In forced-colors mode (Windows High Contrast) the selected tab is drawn in Highlight and the focus as an outline.

Installation

<script type="importmap">
  { "imports": { "datastar": "https://starbase.zweiundeins.gmbh/c/datastar@f602fbe19d74/datastar-rocket.js" } }
</script>
<script type="module" src="https://starbase.zweiundeins.gmbh/c/autoloader.js"></script>

<sb-tabs labels='["Home","Docs","API"]'></sb-tabs>

<script type="importmap">
  {
    "imports": { "datastar": "https://starbase.zweiundeins.gmbh/c/datastar@f602fbe19d74/datastar-rocket.js" },
    "integrity": {
      "https://starbase.zweiundeins.gmbh/c/datastar@f602fbe19d74/datastar-rocket.js": "sha384-mvTnynHaljKNMleD0bj6/rWROnluHlNmbc5rOQTd+fQH3YBDYhlvHdNquEX99by5"
    }
  }
</script>
<script type="module" src="https://starbase.zweiundeins.gmbh/c/tabs@5c10a36a64dc/tabs.bundle.min.js" integrity="sha384-kiKBs+uYghB25P+Y1A0tjR6RtpPMRwMg2Y8QQSlIQ+TOOpg2CtDXH7fwuYD9d9uK"></script>

<sb-tabs labels='["Home","Docs","API"]'></sb-tabs>

<script type="importmap">
  {
    "imports": { "datastar": "https://starbase.zweiundeins.gmbh/c/datastar@f602fbe19d74/datastar-rocket.js" },
    "integrity": {
      "https://starbase.zweiundeins.gmbh/c/datastar@f602fbe19d74/datastar-rocket.js": "sha384-mvTnynHaljKNMleD0bj6/rWROnluHlNmbc5rOQTd+fQH3YBDYhlvHdNquEX99by5",
      "https://starbase.zweiundeins.gmbh/c/tabs@5c10a36a64dc/tabs.min.js": "sha384-lEkMjsmZLZsA1oqP7XrjCKNvzcfhS97hr6uB/gQVyZQF35CADNu/ORak4vpmG57y"
    }
  }
</script>
<script type="module" src="https://starbase.zweiundeins.gmbh/c/tabs@5c10a36a64dc/tabs.min.js" integrity="sha384-lEkMjsmZLZsA1oqP7XrjCKNvzcfhS97hr6uB/gQVyZQF35CADNu/ORak4vpmG57y"></script>

<sb-tabs labels='["Home","Docs","API"]'></sb-tabs>

<script type="importmap">
  {
    "imports": { "datastar": "https://starbase.zweiundeins.gmbh/c/datastar@f602fbe19d74/datastar-rocket.js" },
    "integrity": {
      "https://starbase.zweiundeins.gmbh/c/datastar@f602fbe19d74/datastar-rocket.js": "sha384-mvTnynHaljKNMleD0bj6/rWROnluHlNmbc5rOQTd+fQH3YBDYhlvHdNquEX99by5",
      "https://starbase.zweiundeins.gmbh/c/tabs@5c10a36a64dc/tabs.bundle.min.js": "sha384-kiKBs+uYghB25P+Y1A0tjR6RtpPMRwMg2Y8QQSlIQ+TOOpg2CtDXH7fwuYD9d9uK"
    }
  }
</script>
<script type="module" src="https://starbase.zweiundeins.gmbh/c/@339249aca48f/autoloader.js" integrity="sha384-ZNpMayI1XShztIEX0iDHyCDDbhT8H+t+zEESUq4BCrN4b+7m931LQEl5x0vbY+Vo"></script>

<sb-tabs labels='["Home","Docs","API"]'></sb-tabs>

<script type="importmap">
  { "imports": { "datastar": "/js/datastar-rocket.js" } }
</script>
<script type="module" src="/js/tabs/tabs.bundle.min.js"></script>

<sb-tabs labels='["Home","Docs","API"]'></sb-tabs>

<script type="importmap">
  { "imports": { "datastar": "/js/datastar-rocket.js" } }
</script>
<script type="module" src="/js/tabs/tabs.min.js"></script>

<sb-tabs labels='["Home","Docs","API"]'></sb-tabs>

Size

A page loads this component as one file, its bundle, compressed the way it is served (gzip -9, brotli -11): brotli is what it downloads. Datastar and Rocket are shared by every component and not counted.

API reference

Props

Slots

Events