Tabs

Tabbed interface with client-side switching and full keyboard navigation.

Basic Tabs

Account Settings

Manage your account preferences and information.

    <.tabs id="my-tabs" default_value="account">
  <:tab value="account">Account</:tab>
  <:tab value="password">Password</:tab>
  <:tab value="settings">Settings</:tab>
  <:panel value="account">
    <p>Account content here.</p>
  </:panel>
  <:panel value="password">
    <p>Password content here.</p>
  </:panel>
  <:panel value="settings">
    <p>Settings content here.</p>
  </:panel>
</.tabs>
  

With Disabled Tab

Individual tabs can be disabled.

Disabled Tab

First tab content.

    <.tabs id="my-tabs" default_value="tab1">
  <:tab value="tab1">Active</:tab>
  <:tab value="tab2" disabled>Disabled</:tab>
  <:tab value="tab3">Also Active</:tab>
  <:panel value="tab1">First tab content.</:panel>
  <:panel value="tab2">Disabled tab content.</:panel>
  <:panel value="tab3">Third tab content.</:panel>
</.tabs>
  

Notes

Tab switching is client-side only - no server round-trip required.
Full keyboard navigation: Arrow Left/Right to switch tabs, Home/End for first/last.
Implements the WAI-ARIA tabs pattern with proper tablist/tab/tabpanel roles.

Tabs

Account Settings

Password Settings

App Settings

With Disabled Tab

Notes