Tabs

Storybook

A set of layered sections of content — known as tab panels — that are displayed one at a time. Demonstrated in all state modes plus patch mode.

Client-only Tabs

No server events. Tab switching happens purely via JavaScript — zero latency.

Account

Make changes to your account here. Click save when you're done.

Password

Change your password here. After saving, you'll be logged out.

Notifications

Configure how you receive notifications.

<.tabs id="client-tabs" default_value="account">
  <.tabs_list>
    <.tabs_trigger value="account">Account</.tabs_trigger>
    <.tabs_trigger value="password">Password</.tabs_trigger>
    <.tabs_trigger value="notifications">Notifications</.tabs_trigger>
  </.tabs_list>
  <.tabs_content value="account" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Account</h3>
      <p class="text-sm text-muted-foreground">
        Make changes to your account here. Click save when you're done.
      </p>
    </div>
  </.tabs_content>
  <.tabs_content value="password" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Password</h3>
      <p class="text-sm text-muted-foreground">
        Change your password here. After saving, you'll be logged out.
      </p>
    </div>
  </.tabs_content>
  <.tabs_content value="notifications" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Notifications</h3>
      <p class="text-sm text-muted-foreground">
        Configure how you receive notifications.
      </p>
    </div>
  </.tabs_content>
</.tabs>

Line Variant

The line variant uses an underline indicator instead of a background pill. The ::after pseudo-element provides the active underline.

Project overview with key metrics and recent activity.

Detailed analytics and performance data.

Generated reports and exports.

This tab is disabled and shouldn't be reachable.

<.tabs id="line-tabs" default_value="overview">
  <.tabs_list variant="line">
    <.tabs_trigger value="overview">Overview</.tabs_trigger>
    <.tabs_trigger value="analytics">Analytics</.tabs_trigger>
    <.tabs_trigger value="reports">Reports</.tabs_trigger>
    <.tabs_trigger value="settings" disabled>Settings</.tabs_trigger>
  </.tabs_list>
  <.tabs_content value="overview" class="p-4">
    <p class="text-sm text-muted-foreground">
      Project overview with key metrics and recent activity.
    </p>
  </.tabs_content>
  <.tabs_content value="analytics" class="p-4">
    <p class="text-sm text-muted-foreground">
      Detailed analytics and performance data.
    </p>
  </.tabs_content>
  <.tabs_content value="reports" class="p-4">
    <p class="text-sm text-muted-foreground">
      Generated reports and exports.
    </p>
  </.tabs_content>
  <.tabs_content value="settings" class="p-4">
    <p class="text-sm text-muted-foreground">
      This tab is disabled and shouldn't be reachable.
    </p>
  </.tabs_content>
</.tabs>

Vertical Orientation

Set orientation="vertical" for side-by-side layout. Arrow keys switch from horizontal (Left/Right) to vertical (Up/Down).

General Settings

Manage your workspace name, description, and default preferences.

Security

Configure two-factor authentication and session management.

Integrations

Connect third-party services and manage API keys.

Billing

View invoices, manage payment methods, and update your plan.

<.tabs id="vertical-tabs" default_value="general" orientation="vertical">
  <.tabs_list>
    <.tabs_trigger value="general">General</.tabs_trigger>
    <.tabs_trigger value="security">Security</.tabs_trigger>
    <.tabs_trigger value="integrations">Integrations</.tabs_trigger>
    <.tabs_trigger value="billing">Billing</.tabs_trigger>
  </.tabs_list>
  <.tabs_content value="general" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">General Settings</h3>
      <p class="text-sm text-muted-foreground">
        Manage your workspace name, description, and default preferences.
      </p>
    </div>
  </.tabs_content>
  <.tabs_content value="security" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Security</h3>
      <p class="text-sm text-muted-foreground">
        Configure two-factor authentication and session management.
      </p>
    </div>
  </.tabs_content>
  <.tabs_content value="integrations" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Integrations</h3>
      <p class="text-sm text-muted-foreground">
        Connect third-party services and manage API keys.
      </p>
    </div>
  </.tabs_content>
  <.tabs_content value="billing" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Billing</h3>
      <p class="text-sm text-muted-foreground">
        View invoices, manage payment methods, and update your plan.
      </p>
    </div>
  </.tabs_content>
</.tabs>

Hybrid

JS switches tabs instantly for responsiveness, then pushes the event to the server. The event log below updates via LiveView.

Content for the first tab.

Content for the second tab.

Content for the third tab.

Event Log

Toggle an item above to see events appear here.

<.tabs id="hybrid-tabs" default_value="tab1" on_value_change="tabs:change">
  <.tabs_list>
    <.tabs_trigger value="tab1">First</.tabs_trigger>
    <.tabs_trigger value="tab2">Second</.tabs_trigger>
    <.tabs_trigger value="tab3">Third</.tabs_trigger>
  </.tabs_list>
  <.tabs_content value="tab1" class="p-4">
    <p class="text-sm text-muted-foreground">Content for the first tab.</p>
  </.tabs_content>
  <.tabs_content value="tab2" class="p-4">
    <p class="text-sm text-muted-foreground">Content for the second tab.</p>
  </.tabs_content>
  <.tabs_content value="tab3" class="p-4">
    <p class="text-sm text-muted-foreground">Content for the third tab.</p>
  </.tabs_content>
</.tabs>

Server-controlled

The server owns the state. Use the buttons below to control the active tab externally. Content panels use :if — only the active panel is in the DOM.

Account

Server-rendered account settings. Only this panel is in the DOM.

Server tab: "account"

<div class="flex flex-wrap gap-2 mb-3">
  <.button size="sm" variant="outline" phx-click="set-tab" phx-value-tab="account">
    Account
  </.button>
  <.button size="sm" variant="outline" phx-click="set-tab" phx-value-tab="password">
    Password
  </.button>
  <.button size="sm" variant="outline" phx-click="set-tab" phx-value-tab="billing">
    Billing
  </.button>
</div>

<.tabs id="server-tabs" value={@server_tab} on_value_change="tabs:change">
  <.tabs_list>
    <.tabs_trigger value="account">Account</.tabs_trigger>
    <.tabs_trigger value="password">Password</.tabs_trigger>
    <.tabs_trigger value="billing">Billing</.tabs_trigger>
  </.tabs_list>
  <.tabs_content :if={@server_tab == "account"} value="account" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Account</h3>
      <p class="text-sm text-muted-foreground">
        Server-rendered account settings. Only this panel is in the DOM.
      </p>
    </div>
  </.tabs_content>
  <.tabs_content :if={@server_tab == "password"} value="password" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Password</h3>
      <p class="text-sm text-muted-foreground">
        Server-rendered password settings.
      </p>
    </div>
  </.tabs_content>
  <.tabs_content :if={@server_tab == "billing"} value="billing" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Billing</h3>
      <p class="text-sm text-muted-foreground">
        Server-rendered billing information.
      </p>
    </div>
  </.tabs_content>
</.tabs>

Push Event (Server → Client)

The server pushes commands to a client-mode tabs via push_event/3. The tabs have no value or on_value_change — they're client-only, but the server can still command them.

Your music library.

Your podcast subscriptions.

Your audiobook collection.

<div class="flex flex-wrap gap-2">
  <.button size="sm" variant="outline" phx-click="push-activate" phx-value-tab="music">Music</.button>
  <.button size="sm" variant="outline" phx-click="push-activate" phx-value-tab="podcasts">Podcasts</.button>
  <.button size="sm" variant="outline" phx-click="push-activate" phx-value-tab="audiobooks">Audiobooks</.button>
</div>

<.tabs id="push-tabs" default_value="music">
  <.tabs_list>
    <.tabs_trigger value="music">Music</.tabs_trigger>
    <.tabs_trigger value="podcasts">Podcasts</.tabs_trigger>
    <.tabs_trigger value="audiobooks">Audiobooks</.tabs_trigger>
  </.tabs_list>
  <.tabs_content value="music" class="p-4">
    <p class="text-sm text-muted-foreground">Your music library.</p>
  </.tabs_content>
  <.tabs_content value="podcasts" class="p-4">
    <p class="text-sm text-muted-foreground">Your podcast subscriptions.</p>
  </.tabs_content>
  <.tabs_content value="audiobooks" class="p-4">
    <p class="text-sm text-muted-foreground">Your audiobook collection.</p>
  </.tabs_content>
</.tabs>

Patch Mode — Path Params

Triggers render as link patches instead of buttons. The URL updates to /showcase/tabs/:tab and handle_params/3 reads the active tab from the path. Supports browser back/forward navigation.

Overview Members Settings

Overview

The URL now shows /showcase/tabs/overview. Try the browser back/forward buttons.

Path param tab: "overview"

<.tabs id="patch-tabs" value={@patch_tab}>
  <.tabs_list>
    <.tabs_trigger value="overview" patch={~p"/showcase/tabs/overview"}>Overview</.tabs_trigger>
    <.tabs_trigger value="members" patch={~p"/showcase/tabs/members"}>Members</.tabs_trigger>
    <.tabs_trigger value="settings" patch={~p"/showcase/tabs/settings"}>Settings</.tabs_trigger>
  </.tabs_list>
  <.tabs_content :if={@patch_tab == "overview"} value="overview" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Overview</h3>
      <p class="text-sm text-muted-foreground">
        The URL now shows <code class="rounded bg-muted px-1 py-0.5">/showcase/tabs/overview</code>.
        Try the browser back/forward buttons.
      </p>
    </div>
  </.tabs_content>
  <.tabs_content :if={@patch_tab == "members"} value="members" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Members</h3>
      <p class="text-sm text-muted-foreground">
        The URL now shows <code class="rounded bg-muted px-1 py-0.5">/showcase/tabs/members</code>.
      </p>
    </div>
  </.tabs_content>
  <.tabs_content :if={@patch_tab == "settings"} value="settings" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Settings</h3>
      <p class="text-sm text-muted-foreground">
        The URL now shows <code class="rounded bg-muted px-1 py-0.5">/showcase/tabs/settings</code>.
      </p>
    </div>
  </.tabs_content>
</.tabs>

Patch Mode — Query Params

Same pattern but with query parameters: /showcase/tabs?tab=.... Useful when you want tabs on a page without changing the route path.

Overview Members Settings

Overview

The URL now shows ?tab=overview.

Query param tab: "overview"

<.tabs id="query-tabs" value={@query_tab}>
  <.tabs_list>
    <.tabs_trigger value="overview" patch={~p"/showcase/tabs?tab=overview"}>Overview</.tabs_trigger>
    <.tabs_trigger value="members" patch={~p"/showcase/tabs?tab=members"}>Members</.tabs_trigger>
    <.tabs_trigger value="settings" patch={~p"/showcase/tabs?tab=settings"}>Settings</.tabs_trigger>
  </.tabs_list>
  <.tabs_content :if={@query_tab == "overview"} value="overview" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Overview</h3>
      <p class="text-sm text-muted-foreground">
        The URL now shows <code class="rounded bg-muted px-1 py-0.5">?tab=overview</code>.
      </p>
    </div>
  </.tabs_content>
  <.tabs_content :if={@query_tab == "members"} value="members" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Members</h3>
      <p class="text-sm text-muted-foreground">
        The URL now shows <code class="rounded bg-muted px-1 py-0.5">?tab=members</code>.
      </p>
    </div>
  </.tabs_content>
  <.tabs_content :if={@query_tab == "settings"} value="settings" class="p-4">
    <div class="space-y-2">
      <h3 class="text-lg font-medium">Settings</h3>
      <p class="text-sm text-muted-foreground">
        The URL now shows <code class="rounded bg-muted px-1 py-0.5">?tab=settings</code>.
      </p>
    </div>
  </.tabs_content>
</.tabs>