How to Create Tabs in Svelte: Simple Tab Component Example

To create tabs in Svelte, use a reactive variable to track the active tab and conditionally render content based on that variable. Use on:click events on tab buttons to update the active tab and show the corresponding content.

Syntax

In Svelte, tabs are created by using a variable to store the current active tab. You use on:click on buttons or elements to change this variable. Then, use {#if} blocks or {#each} to conditionally show content for the active tab.

Key parts:

• let activeTab = 'tab1'; — stores which tab is active.
• on:click={() => activeTab = 'tab2'} — changes active tab on click.
• {#if activeTab === 'tab1'} — shows content only if tab1 is active.

svelte

<script>
  let activeTab = 'tab1';
</script>

<button on:click={() => activeTab = 'tab1'}>Tab 1</button>
<button on:click={() => activeTab = 'tab2'}>Tab 2</button>

{#if activeTab === 'tab1'}
  <p>This is content for Tab 1.</p>
{:else if activeTab === 'tab2'}
  <p>This is content for Tab 2.</p>
{/if}

Example

This example shows a simple tab component with three tabs. Clicking a tab changes the active tab and updates the displayed content. The active tab button is styled differently for clarity.

svelte

<script>
  let activeTab = 'home';
  const tabs = [
    { id: 'home', label: 'Home' },
    { id: 'profile', label: 'Profile' },
    { id: 'settings', label: 'Settings' }
  ];
</script>

<style>
  .tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  button {
    padding: 0.5rem 1rem;
    border: none;
    background: #eee;
    cursor: pointer;
    border-radius: 4px;
  }
  button.active {
    background: #007acc;
    color: white;
    font-weight: bold;
  }
</style>

<div class="tabs" role="tablist">
  {#each tabs as tab}
    <button
      class:active={activeTab === tab.id}
      on:click={() => activeTab = tab.id}
      aria-selected={activeTab === tab.id}
      role="tab"
      tabindex={activeTab === tab.id ? 0 : -1}
    >
      {tab.label}
    </button>
  {/each}
</div>

<div role="tabpanel">
  {#if activeTab === 'home'}
    <p>Welcome to the Home tab content.</p>
  {:else if activeTab === 'profile'}
    <p>This is your Profile information.</p>
  {:else if activeTab === 'settings'}
    <p>Adjust your Settings here.</p>
  {/if}
</div>

Output

Three buttons labeled Home, Profile, and Settings horizontally. The active tab button is blue with white text. Below, the content changes to match the selected tab's text.

Common Pitfalls

Common mistakes when creating tabs in Svelte include:

• Not updating the active tab variable on click, so tabs don't switch.
• Forgetting to use reactive statements or {#if} blocks, causing all tab contents to show at once.
• Not managing keyboard accessibility or ARIA roles, which hurts usability.
• Using multiple variables instead of one to track active tab, making state confusing.

Always use a single source of truth for the active tab and conditionally render content.

svelte

<!-- Wrong: No reactive update -->
<button on:click={() => {}}>Tab 1</button>
<button on:click={() => {}}>Tab 2</button>

<!-- Right: Update activeTab variable -->
<script>
  let activeTab = 'tab1';
</script>
<button on:click={() => activeTab = 'tab1'}>Tab 1</button>
<button on:click={() => activeTab = 'tab2'}>Tab 2</button>

Quick Reference

• Use let activeTab to track the current tab.
• Use on:click to change activeTab.
• Use {#if} or {#each} to show tab content conditionally.
• Style the active tab button for clear UI feedback.
• Add ARIA roles like role="tab" and role="tabpanel" for accessibility.

Key Takeaways

Use a single reactive variable to track the active tab in Svelte.

Update the active tab variable with on:click events on tab buttons.

Conditionally render tab content using {#if} blocks based on the active tab.

Style the active tab button to visually indicate which tab is selected.

Add ARIA roles and keyboard support for accessible tabs.