Tabs

What this example shows

SvTabs - a production settings screen: line tabs with real panels, plus a pill-style variant. Roving arrow-key focus, automatic activation. Copy-paste ready.

Imports, features and API used

Imports: @svgrid/grid

Source code (320-tabs.svelte)

<script lang="ts">
  /**
   * SvTabs - a production settings screen: line tabs with real panels, plus a
   * pill-style variant. Roving arrow-key focus, automatic activation. Copy-paste
   * ready.
   */
  import { SvTabs } from '@svgrid/grid'
  import type { TabItem } from '@svgrid/grid'

  const tabs: TabItem[] = [
    { id: 'profile', label: 'Profile' },
    { id: 'security', label: 'Security' },
    { id: 'billing', label: 'Billing' },
    { id: 'team', label: 'Team', disabled: true },
  ]
  let active = $state('profile')
  const view: TabItem[] = [
    { id: 'grid', label: 'Grid' },
    { id: 'list', label: 'List' },
    { id: 'board', label: 'Board' },
  ]
  let viewMode = $state('grid')
</script>

<div class="wrap">
  <header>
    <h2>Tabs</h2>
    <p>WAI-ARIA tabs with roving arrow-key focus - settings screens, detail panels, view switchers. Line and pill variants.</p>
  </header>

  <div class="card">
    <SvTabs {tabs} bind:value={active}>
      {#snippet panel(id)}
        <div class="panel">
          {#if id === 'profile'}
            <h4>Profile</h4><p>Update your name, avatar and public bio. Changes are visible to your team immediately.</p>
          {:else if id === 'security'}
            <h4>Security</h4><p>Manage your password, two-factor authentication and active sessions.</p>
          {:else if id === 'billing'}
            <h4>Billing</h4><p>Your plan renews on the 1st. Update your card or download past invoices here.</p>
          {/if}
        </div>
      {/snippet}
    </SvTabs>
  </div>

  <div class="pillrow">
    <span class="pl">View</span>
    <SvTabs tabs={view} variant="pill" bind:value={viewMode} />
    <span class="cur">{viewMode}</span>
  </div>
</div>

<style>
  .wrap { padding: 20px; max-width: 560px; display: flex; flex-direction: column; gap: 22px; }
  header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
  header p { margin: 0; color: var(--sg-muted, #64748b); font-size: 13.5px; line-height: 1.5; }
  .card { border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; padding: 4px 16px 8px; }
  .panel h4 { margin: 0 0 6px; font-size: 15px; }
  .panel p { margin: 0; font-size: 13.5px; color: var(--sg-muted, #64748b); line-height: 1.6; }
  .pillrow { display: flex; align-items: center; gap: 12px; }
  .pl { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--sg-muted, #64748b); }
  .cur { font-size: 13px; color: var(--sg-muted, #94a3b8); }
</style>

View this example on GitHub

Related documentation

• SvTabs

Related articles

• Avoiding Layout Thrash in Custom Grid Cells - Layout thrash from interleaved DOM reads and writes is the most common cause of scroll jank in grids with custom cells - here is how to find it and design your way out of it.
• Column Resizing and Reordering - Let Users Shape the Grid - How to wire drag-to-resize and drag-to-reorder in SvGrid, then persist the layout to localStorage so it survives page reloads.

More Layout examples

• Account & security settings console - A real SaaS settings surface composed from the UI kit: SvMenubar app bar, promise + Undo-action toasts on save, SvPopconfirm on destructive rows, SvHoverCard teammate previews, and frame input adornments (leading icons, prefix affixes, masked API key). Profile / Team / Security tabs over SvCard + SvStat.
• Invoice builder - An adornment-heavy money form: currency prefixes, % suffixes, masked tax IDs (frame adornments), line items with SvPopconfirm delete + Undo action toasts, live SvStat totals, an SvHoverCard tax hint, and a promise toast on Send. Pure UI-kit composition.
• Operations KPI dashboard - A KPI console: SvStat + SvSparkline tiles, an SvGauge SLA dial, SvHoverCard drill-down previews per service, an SvMenubar toolbar (View / Range / Actions) and a promise toast on Refresh. Pure UI-kit composition, no grid dependency.
• Form: rich field types - SvForm reaching the whole input suite from one schema - phone, country, mask, combobox, radio, slider, tags, datetime and file - plus per-field help text, a readonly field, column span, and a promise toast on submit.
• Form: cascading fields - SvForm dependent selects - a child list derives from the parent value via a function `options`, and `dependsOn` clears the child when the parent changes so a stale selection never lingers. Country -> State -> City.