Tabs

The Tabs component organizes content into multiple panels, allowing users to switch between views easily. Ideal for sectioned content like settings, product details, or data categories, Tabs create a clean, accessible way to navigate related information within a single interface.

Preview Code

Account Password

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

Name Username

Save changes

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

Current password New password

Change password

<div x-data="tabs({ label: 'Manage your account' })" class="border border-zinc-200 rounded-lg">
    <div x-ref="list" class="flex border-b border-zinc-200">
        <button x-data="tabTrigger('tab-1')" class="bg-white leading-none rounded-lg p-4 flex-1">Account</button>
        <button x-data="tabTrigger('tab-2')" class="bg-white leading-none rounded-lg p-4 flex-1">Password</button>
        <div x-ref="indicator" x-cloak class="size-[2px] bg-zinc-900 rounded-lg !top-auto -bottom-px motion-safe:transition-[transform,width,height]"></div>
    </div>
    <div class="p-4" x-data="tabContent('tab-1')">
        <p class="opacity-80 leading-normal mb-2">Make changes to your account here. Click save when you're done.</p>
        <label for="name-input" class="text-sm">Name</label>
        <input id="name-input" class="demo-input mb-2" type="text" value="Joost">
        <label for="username-input" class="text-sm">Username</label>
        <input id="username-input" class="demo-input mb-2" type="text" value="@jramke">
        <div class="text-end mt-5">
            <button class="demo-button primary">Save changes</button>
        </div>
    </div>
    <div class="p-4" x-data="tabContent('tab-2')" x-cloak>
        <p class="opacity-80 leading-normal mb-2">Change your password here. After saving, you'll be logged out.</p>
        <label for="curr-pw-input" class="text-sm">Current password</label>
        <input id="curr-pw-input" class="demo-input mb-2" type="text" value="">
        <label for="new-pw-input" class="text-sm">New password</label>
        <input id="new-pw-input" class="demo-input mb-2" type="text" value="">
        <div class="text-end mt-5">
            <button class="demo-button primary">Change password</button>
        </div>
    </div>
</div>

Structure

<div x-data="tabs">
  <div x-ref="list">
      <button x-data="tabTrigger('tab-1')"></button>
      <div x-ref="indicator" x-cloak></div>
  </div>
  <div x-data="tabContent('tab-1')"></div>
</div>

API Reference

x-data="tabs"

The root component containing the state and functionality.

Property	Type	Description	Default
initialActive	string	The initial active tab value	""
orientation	enum "horizontal" | "vertical"	The orientation of the tabs. Used for the arrow key control and aria-attribute	horizontal
label	string	The label for the tabs component. The tablist element should have an aria-label. Alternatively you can add an element with x-ref="label" wich will be used for aria-labelledby.	""
urlSync	enum "hash" | "search" | false	The method for syncing the active tab with the URL, either via search parameters or hash.	false
onActiveTabChange	function	A callback function that is called when the active tab changes	null

x-data="tabTrigger"

A trigger element for a tab.

Property	Type	Description	Default
value	string	The unique value of the tab trigger to link it with a content slide	""

x-data="tabContent"

A content element for a tab.

Property	Type	Description	Default
value	string	The unique value of the tab content to link it with a trigger	""