Tabs

Underline-style tabs. This is tabs.css in @layer components.

Tabs
<div class="tabs">
  <div class="tab-list">
    <button class="tab is-active">General</button>
    <button class="tab">Billing</button>
  </div>

  <div class="tab-panel">General settings…</div>
</div>

Parts

Class	Role
.tabs	The container (a vertical flex column)
.tab-list	The row of tabs with a bottom rule
.tab	A single tab: quiet by default, an accent underline when active
.tab.is-active	The current tab: --ink text and an accent bottom border
.tab-panel	The content region below the list

A .tab is typically a <button>, but the styling works on any element you give the class.

Switching panels

Keep the current tab in a private attribute, set it from each tab's onclick, and show the matching panel with e:if. The styling supplies the look and the is-active hook, and the switching lives in the template because that is where the page's state lives:

Tabs
<html (private tab: string = "general")>
  <div class="tabs">
    <div class="tab-list">
      <button class={["tab", tab === "general" && "is-active"]} onclick={() => tab = "general"}>General</button>
      <button class={["tab", tab === "billing" && "is-active"]} onclick={() => tab = "billing"}>Billing</button>
    </div>

    <div class="tab-panel" e:if={tab === "general"}>General settings…</div>
    <div class="tab-panel" e:elseif={tab === "billing"}>Billing settings…</div>
  </div>
</html>