Tabs
Default Tabs (with HTMX)
Click the "HTMX Content" tab to load content dynamically via HTMX, identical to accordion-item.
Overview
This is the first tab panel with static content. Tabs provide a clean, accessible way to organize related content.
Features
- Accessible WAI-ARIA tab pattern with full keyboard navigation
- HTMX lazy-loading support directly on the tab element
- Storage key persistence for maintaining selection across page reloads
- Multiple visual variants: line, pills, enclosed
This content should not be accessible.
Pills Variant
Manage your account settings, profile information, and preferences.
Change your password and configure two-factor authentication.
Configure email, push, and in-app notification preferences.
Tabs with Storage Key (persists active tab)
Select a tab and refresh the page to see it restored.
This tab remembers its active state across page reloads using the storage-key attribute.
Switch to this tab and refresh the page!
All state is saved to localStorage under the given storage key.
External HTMX Target
An external button can also target a specific tab via HTMX. When the request starts/swaps, the tab automatically opens and displays the response.
Default active tab content.
Click the button above to load dynamic content here and automatically switch to this tab.
Third tab content.
Vertical Tabs
General Settings
Customize system behavior and general user preferences.
Security
Review active sessions, login history, and security keys.
Billing & Invoices
View subscription details, payment methods, and invoice history.