--- title: "Tabs" description: "Layered panels of content shown one at a time: segmented, underlined, pill and outline styles, icons, disabled tabs, vertical lists, and groups that sync and remember the choice." url: "https://susonwaiba.github.io/htmx-ui/docs/v0.2/components/tabs" section: "Components" --- # Tabs Layered panels of content shown one at a time: segmented, underlined, pill and outline styles, icons, disabled tabs, vertical lists, and groups that sync and remember the choice. ```html

Change your name and email address.

``` ## Markup - Each `[data-tab]` button shows the `[data-tab-panel]` with the same value and hides the others. - Mark the initial tab with `aria-selected="true"` and add `hidden` to the other panels, so the page is right before JavaScript runs. - The behaviour fills in `id`, `aria-controls` and `aria-labelledby`, and moves focus with `←` `→` `Home` `End`. - `.tabs` on the wrapper spaces the list and the panels and lays them out side by side when [vertical](#vertical). ## Underlined ```html

Overview panel

``` ## Pills and outline `.tabs-pills` fills the selected tab with the primary colour; `.tabs-outline` sets it in a bordered chip on a plain background. ```html

Today's numbers.

``` ## Full width `.tabs-full` stretches the list across its container and shares the row between the triggers. ```html

``` ## Icons Put an `icon()` before (or instead of) the label. An icon-only tab needs an `aria-label`. ```html

The rendered result.

Aligned left.

``` ## Disabled A `disabled` trigger fades, can't be picked, and the arrow keys skip it. ```html

Free plan.

``` ## Vertical `data-orientation="vertical"` on the `.tabs` wrapper puts the list beside the panels, its triggers stacked. The behaviour sets `aria-orientation` on the tablist and moves with `↑` `↓`. Every variant works; `.tabs-line` draws its line on the side. ```html

Name, language and time zone.

``` ## Synced and remembered Give groups the same `data-tabs-sync` key and they switch together. The choice is saved to `localStorage` (key `tabs:`), restored on the next visit, and followed in other open browser tabs. The package-manager tabs on code blocks use `data-tabs-sync="pm"`. Switch one of these two: ```html

Group 1: HTML panel

Group 2: HTML panel

``` ## Lazy panels with htmx Load a panel's content the first time it's shown with `hx-trigger="intersect once"`: ```html

Rendered with the page.

``` ## Reference | Class | Description | | --- | --- | | `.tabs` | Wrapper: spaces the list and panels; side by side when vertical. | | `.tabs-list` | Segmented control holding the tab buttons. | | `.tabs-trigger` | Tab button; selected style comes from aria-selected="true", faded when disabled. | | `.tabs-panel` | Panel focus ring. | | `.tabs-line / .tabs-pills / .tabs-outline` | Underlined, primary-filled and bordered variants of .tabs-list. | | `.tabs-full` | List and triggers stretched to the full width. | | `[data-tabs]` | Behaviour: wires up a tab group. | | `[data-orientation="vertical"]` | On .tabs: list beside the panels, Up/Down keys. | | `[data-tab] / [data-tab-panel]` | Matching values pair a tab with its panel. | | `[data-tabs-sync="key"]` | Sync groups with the same key and remember the choice. |