Tabs

Switches between views of one subject, as a line or a segmented control.

The games panel.

tabs.example.svelte

<script lang="ts">
  import { Tabs } from '@onlywin/ui-svelte';

  const tabs = [
    { count: 9, id: 'games', label: 'Games' },
    { count: 3, id: 'partners', label: 'Partners' },
    { id: 'reports', label: 'Reports' },
  ];
</script>

<div class="example-stack">
  <Tabs label="Office" {tabs} value="games">
    {#snippet children(id)}
      <p class="example-note">The {id} panel.</p>
    {/snippet}
  </Tabs>
  <Tabs
    label="Period"
    variant="segmented"
    value="7d"
    tabs={[
      { id: '24h', label: '24 h' },
      { id: '7d', label: '7 days' },
      { id: '30d', label: '30 days' },
    ]}
  />
</div>

Usage

Do

Use it to switch views of the same thing.
Show counts when they help choose.

Don’t

Do not use it for steps that must happen in order.

Accessibility

A tablist of tabs controlling one tabpanel; only the selected tab is in the tab order.
Tabs activate as focus moves.

Keyboard

Tabs keyboard interactions
Keys	Action
`Arrow Right, Arrow Left`	Next or previous tab
`Home, End`	First or last tab

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Tabs props
Prop	Type	Default	Description
`children`	`Snippet<[string]>`	—	The selected tab's panel; gets the selected tab's id.
`label` *required	`string`	—	The tablist's accessible name.
`onValueChange`	`(id: string) => void`	—
`tabs` *required	`ReadonlyArray<IUiTab>`	—
`value`	`string`	`tabs[0]?.id ?? ''`	Bindable in Svelte; `defaultValue` in React.
`variant`	`'line' \| 'segmented'`	`'line'`