Renders a tab list and its panels.

Client-owned (default): the hook tracks the selected tab and protects it from server patches.

<.tabs id="settings" default="general">
  <:tab value="general">General</:tab>
  <:tab value="billing">Billing</:tab>
  <:panel value="general">...</:panel>
  <:panel value="billing">...</:panel>
</.tabs>

Server-owned: pass value and on_change. The hook pushes on_change with %{"tab" => value} and re-selects whenever value changes.

<.tabs id="settings" value={@tab} on_change={JS.push("tab")}>

URL-owned: give tabs a patch, and pass value from the params.

<:tab value="general" patch={~p"/settings/general"}>General</:tab>

Keyboard: arrows move and activate, Home/End jump. Panels are focusable so keyboard users can reach their content directly from the tab.

Attributes

• id (:string) (required)
• default (:string) - initially selected tab value (client-owned). Defaults to nil.
• value (:string) - selected tab value (server-owned). Defaults to nil.
• on_change (Phoenix.LiveView.JS) - pushed with phx-value-tab when a tab is selected. Defaults to nil.
• orientation (:string) - Defaults to "horizontal". Must be one of "horizontal", or "vertical".
• variant (:string) - Defaults to "line". Must be one of "line", or "pill".
• label (:string) - accessible name for the tab list. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• tab (required) - Accepts attributes:
  • value (:string) (required)
  • patch (:string)
  • navigate (:string)
  • disabled (:boolean)
• panel (required) - Accepts attributes:
  • value (:string) (required)