Tab

Tab Component

The Tab component creates an accessible, keyboard-navigable tab list for switching between different content panels. It supports both button and anchor elements as tab triggers, with customizable tooltips and controlled selection state.

Example Usage

<x-tab selectedTab="overview">
    <x-tab.item uuid="overview" tooltip="Overview tab">
        Overview
    </x-tab.item>
    <x-tab.item uuid="details" href="#details" tooltip="Details section">
        Details
    </x-tab.item>
    <x-tab.item uuid="settings" href="#settings">
        Settings
    </x-tab.item>
</x-tab>

Props

Tab (Parent)

• selectedTab (string|null)
  The UUID of the initially selected tab. If bound via Livewire or Alpine, selection will be synced.

Tab.Item

• uuid (string, default: autogenerated)
  Unique identifier for the tab, used for selection and ARIA attributes.

• href (string|null)
  Optional URL for anchor tabs. If provided, the tab renders as an <a> tag, otherwise as a <button>.

• tooltip (string|null)
  Optional tooltip text shown on hover for the tab item.

Overview

The Tab component manages a group of tab items with accessible keyboard navigation (left/right arrow keys) and ARIA roles. It highlights the selected tab visually with bold text and underline. The component supports both link and button tabs, dynamic selection binding, and optional tooltips for enhanced usability. Tailwind CSS handles styling, including dark mode support.