Components

Tabs

Sections of one page behind a row of tabs, showing one panel at a time.

Usage

Give the tabs as items, bind the value, and render the selected tab's content in the panel snippet, which receives that item. A long row of tabs scrolls. grow shares the width equally.

Balance $12,480.00 across three accounts.

Account.svelte

<script>
  import { Tabs } from 'sveltier';
  let section = $state('overview');
</script>

<Tabs
  aria-label="Account"
  items={[
    { value: 'overview', label: 'Overview' },
    { value: 'activity', label: 'Activity' }
  ]}
  bind:value={section}
>
  {#snippet panel(item)}
    <AccountSection name={item.value} />
  {/snippet}
</Tabs>

Accessibility

The tabs are a tablist with one stop in the tab order. ← →, Home and End move between tabs, skipping disabled ones.
By default a tab is selected as soon as focus reaches it. With activation="manual", Enter or Space selects it, for panels that take a while to show.
The panel is labelled by its tab and takes focus itself, so its content is one Tab away. Name the tab list with aria-label.

API

Name	Type	Default	Description
`color`	`Color`	`'primary'`	The colour of the selected tab and its underline.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Height and text size of the tabs.
`density`	`'compact' \| 'default' \| 'comfortable'`	`'default'`	Multiplies the height and padding of the tabs, never the text.
`grow`	`boolean`	`false`	Tabs share the full width equally.
`items`	`readonly TabsItem<T>[]`	`–`	The tabs, in order.
`value`	`T`	`–`	The selected tab. Bindable; the first enabled tab when not set.
`onchange`	`(value: T) => void`	`–`	Called with the value of the tab the user selects.
`activation`	`'automatic' \| 'manual'`	`'automatic'`	`automatic` selects a tab as soon as the arrow keys reach it; `manual` waits for Enter or Space, for panels that are slow to show.
`panel`	`Snippet<[TabsItem<T>]>`	`–`	The content of the selected tab's panel.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLDivElement \| null`	`–`	The root element, bindable with `bind:ref`.