Tabs
Tabs shows one panel at a time within the page, selected from a scrollable row of tabs with an accent indicator.
01Preview
Overview is selected. Choose “General bibliography” or use the arrow keys to change the panel.
The bibliography is selected. The URL stays the same; the application can read the selection through bind:value.
Additional resources are selected. Both examples share the same selection.
Selected: overview
02Usage
Load @dg/ui/styles.css once in the root layout. Declare each panel as a snippet and pass it with its tab.
<script>
import { Section, Tabs } from "@dg/ui";
let value = $state("description");
</script>
<Section padding="none" gap="none">
<Tabs
label="Artwork details"
bind:value
items={[
{ value: "description", label: "Description", panel: description },
{ value: "provenance", label: "Provenance", panel: provenance },
]}
/>
</Section>
{#snippet description()}<p>A crypto-jukebox played by its collectors.</p>{/snippet}
{#snippet provenance()}<p>Produced by the collective in 2018.</p>{/snippet}
03Examples
Overview is selected. Choose “General bibliography” or use the arrow keys to change the panel.
The bibliography is selected. The URL stays the same; the application can read the selection through bind:value.
Additional resources are selected. Both examples share the same selection.
Selected: overview
Tab focuses the selected tab; Left and Right arrows move between tabs, Home and End reach the ends, and Tab again enters the panel. In a narrow container, the row scrolls horizontally to keep labels readable.
Overview is selected. Choose “General bibliography” or use the arrow keys to change the panel.
The bibliography is selected. The URL stays the same; the application can read the selection through bind:value.
Additional resources are selected. Both examples share the same selection.
04Notes
- Native HTML attributes, DOM callbacks, class and style are forwarded to the root element.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
Tabsrenders its items, not a children snippet. - Every panel is rendered; unselected panels are hidden, so prerendered content stays in the document. Selecting a tab does not change the URL.
- The tab row scrolls horizontally when it overflows and follows the UI typography role. The row and the panels use the layout insets, so they align with a
Sectionthat haspadding="none". - For navigation between pages, use native links in
Headeror in the page content instead.
05Parameters
| Name | Type | Default | Description |
|---|---|---|---|
items | { value: string, label: string, panel: Snippet }[] | [] | Tabs and the panels they show. Values must be unique. |
value | string · bindable | "" | Selected tab value. Use bind:value to read or set it; an empty or unknown value selects the first tab. |
label | string | undefined | Accessible name of the tab list, such as "Artwork details". Defaults to the built-in text in the Page language. |
06Accessibility
Tabs follows the WAI-ARIA tabs pattern: a tablist of tab buttons, each controlling a tabpanel labelled by its tab. Only the selected tab is in the tab order. Left and Right arrows move to the previous or next tab and wrap around; Home and End reach the first and last tab. Selection follows focus. Tab then moves into the selected panel, which is focusable so its content can be scrolled and read.