Tabs

Tabbed panels with arrow-key navigation and automatic or manual activation.

Manage your profile and password.

<div
  data-controller="zag-tabs"
  data-part="root"
  data-zag-tabs-value-value="account"
  class="border-border bg-popover w-full max-w-md rounded-lg border p-4"
>
  <div data-part="list" class="border-border flex gap-1 border-b">
    <button
      data-part="trigger"
      data-value="account"
      class="text-muted-foreground focus-visible:ring-ring data-[selected]:border-primary data-[selected]:text-primary -mb-px border-b-2 border-transparent px-4 py-2 text-sm font-medium focus:outline-none focus-visible:ring-2"
    >
      Account
    </button>
    <button
      data-part="trigger"
      data-value="billing"
      class="text-muted-foreground focus-visible:ring-ring data-[selected]:border-primary data-[selected]:text-primary -mb-px border-b-2 border-transparent px-4 py-2 text-sm font-medium focus:outline-none focus-visible:ring-2"
    >
      Billing
    </button>
  </div>

  <div data-part="content" data-value="account" class="text-muted-foreground pt-4 text-sm">
    Manage your profile and password.
  </div>
  <div data-part="content" data-value="billing" hidden class="text-muted-foreground pt-4 text-sm">
    Update your plan and payment method.
  </div>
</div>

Parts

root, list, trigger, content, indicator.

Each trigger and its matching content share a data-value.

Values

Attribute	Type	Default	Description
data-zag-tabs-value-value	String	""	The tab selected by default.
data-zag-tabs-orientation-value	String	"horizontal"	"horizontal" or "vertical".
data-zag-tabs-activation-mode-value	String	"automatic"	"automatic" (on focus) or "manual".
data-zag-tabs-loop-focus-value	Boolean	true	Wrap arrow-key focus at the ends.
data-zag-tabs-deselectable-value	Boolean	false	Allow clicking the active tab to deselect it.

Events

Emits zag-tabs:change — detail is { value }.

Programmatic control

value (getter), select(value).