Components
tabs

Tabs

Segmented view switcher for organizing content within a page.

Demo

Preview
Code

<x-ui.tabs class="w-full">
    <x-ui.tabs.list-wrapper class="mb-4">
        <x-ui.tabs.list class="pt-2 mb-2 border-b border-border flex items-center gap-5 text-fg-muted">
            <x-ui.tabs.trigger id="tab1" class="flex items-center pb-2.5 border-b-3 border-transparent fx-active:text-fg-title fx-active:border-fg-title">
                Tab Item 1
            </x-ui.tabs.trigger>
            <x-ui.tabs.trigger id="tab2" class="flex items-center pb-2.5 border-b-3 border-transparent fx-active:text-fg-title fx-active:border-fg-title">
                Tab Item 2
            </x-ui.tabs.trigger>
        </x-ui.tabs.list>
    </x-ui.tabs.list-wrapper>
    <x-ui.tabs.panel show-as-grid id="tab1" active>
        <h2 class="font-semibold text-fg-title">Tab 1 Content</h2>
        <p class="mt-1 text-fg-muted text-sm">This is the content for Tab 1.</p>
    </x-ui.tabs.panel>
    <x-ui.tabs.panel show-as-grid id="tab2">
        <h2 class="font-semibold text-fg-title">Tab 2 Content</h2>
        <p class="mt-1 text-fg-muted text-sm">This is the content for Tab 2.</p>
    </x-ui.tabs.panel>
</x-ui.tabs>

Installation

Add the component
Shell
flexi-cli add tabs
Install Dropdown

This component require JS. By default we're using our own Interactive Component Library Flexilla . Install this only if you didn't accept dependencies installation during component addition.
1. With Alpine
2. Without Alpine

Examples

<x-ui.tabs data-indicator-class-name="ui-tabs-indicator flex bg-bg shadow border border-border-strong/40 rounded absolute top-0 left-0"
    class="w-full max-w-md">
    <x-ui.tabs.list class="flex items-center relative w-full p-0.5 bg-bg-subtle rounded-md">
        <x-ui.tabs.trigger wrapper-class="flex flex-1" id="accountTab" href="#accountTab" aria-controls="accountTab"
            tabindex="0" class="px-4 py-2 rounded flex-1 flex items-center justify-center text-sm text-fg relative fx-active:text-fg-title">
            Account
        </x-ui.tabs.trigger>
        <x-ui.tabs.trigger wrapper-class="flex flex-1" id="passTab" href="#passTab" aria-controls="passTab"
            tabindex="-1" class="px-4 py-2 rounded flex-1 flex items-center justify-center text-sm text-fg relative fx-active:text-fg-title">
            Password
        </x-ui.tabs.trigger>
    </x-ui.tabs.list>
    <x-ui.tabs.panel id="accountTab"
        class="p-6 md:p-10 divide-y divide-border-strong border border-border-strong/60 rounded-md mt-2 bg-bg flex-col"
        aria-labelledby="accountTab">
        <div class="space-y-1.5 pb-6 md:pb-8">
            <h3 class="text-2xl font-semibold leading-none tracking-tight text-fg-title">
                Account</h3>
            <p class="text-sm text-fg">Make changes to your account here.
                Click save
                when you're done.</p>
        </div>
        <div class="py-6 md:py-8 space-y-4">
            <x-ui.input label="Email" type="email" id="user_email" name="user_email" placeholder="johndoe@gmail.com" />
            <x-ui.input label="Username" id="user_name" name="user_name" placeholder="@doedoe" />
        </div>
        <div class="flex items-center pt-6 md:pt-8">
            <x-ui.button intent="neutral">
                Save changes
            </x-ui.button>
        </div>
    </x-ui.tabs.panel>
    <x-ui.tabs.panel id="passTab"
        class="p-6 md:p-10 divide-y divide-border-strong border border-border-strong/60 rounded-md mt-2 bg-bg flex-col"
        aria-labelledby="passTab">
        <div class="space-y-1.5 pb-6 md:pb-8">
            <h3 class="text-2xl font-semibold leading-none tracking-tight text-fg-title">
                Password</h3>
            <p class="text-sm text-fg">Change your password here. After
                saving, you'll be logged out.</p>
        </div>
        <div class="py-6 md:py-8 space-y-4">
            <x-ui.input label="Current password" type="password" id="currentPassword" name="currentPassword" placeholder="johndoe@gmail.com" />
            <x-ui.input label="New password" type="password" id="new_password" name="new_password" placeholder="******" />
        </div>
        <div class="flex items-center pt-6 md:pt-8">
            <x-ui.button intent="neutral">Save changes </x-ui.button>
        </div>
    </x-ui.tabs.panel>
</x-ui.tabs>

References

Tabs Component

The tabs component creates a tabbed interface for organizing content into separate views.

Prop	Type	Default	Description
`class`	string	''	Additional CSS classes for the tabs container.

Subcomponents

Component	Description
`x-ui.tabs.list-wrapper`	Optional wrapper component for the tabs list.
`x-ui.tabs.list`	The container for tab triggers. Should contain one or more `x-ui.tabs.trigger` components.
`x-ui.tabs.trigger`	The clickable tab trigger. Must have an 'id' attribute that matches a corresponding panel's 'id'. Accepts a 'class' prop for custom styling.
`x-ui.tabs.panel-wrapper`	Optional wrapper for tab panels. Can be used to add a common container around all panels.
`x-ui.tabs.panel`	The content panel for a tab. Must have an 'id' attribute that matches a trigger's 'id'. Accepts 'show-as-grid' prop to use CSS Grid for layout. Use the 'active' prop to set the initially visible panel.

Events

Event	Description
`tab:changed`	Dispatched when the active tab changes. The event detail contains the ID of the newly active tab.

JavaScript API

To know more about the JavaScript API, check the Flexilla documentation.

Edit this page

Pagination

Controls for navigat...

Demo

Tab 1 Content