TabView

TabView lays a set of tabs out as a strip, in the shape a browser gives its document tabs. Every tab can carry an icon and a close button, and a new tab button can sit at the end of the strip.

The strip owns the selection and nothing else. What a tab opens is rendered by you, wherever it belongs on the page, so a tab can open a panel underneath it, swap a region somewhere else, or drive a route.

To create a tab strip, you will need to use the following components:

• TabView: The root component that creates the context every tab reads: which tab is selected, whether the tabs close, and how they take their width. It renders the tablist and, optionally, the new tab button.
• TabViewTab: A single tab of the strip. It reports its own selection and can carry an icon and a close button.

Usage

A tab strip expects a value on every tab and an activeTab to match it against. Bind activeTab to follow the selection, and render whatever the selected tab opens yourself.

<script>
	import { TabView, TabViewTab } from 'fluentui-svelte';

	let activeTab = $state('document');
</script>

<TabView bind:activeTab listAttributes={{ 'aria-label': 'Workspaces' }}>
	<TabViewTab id="tab-document" value="document">Document</TabViewTab>
	<TabViewTab id="tab-mail" value="mail">Mail</TabViewTab>
</TabView>

{#if activeTab === 'document'}
	<div role="tabpanel" aria-labelledby="tab-document">The document you are working on.</div>
{:else}
	<div role="tabpanel" aria-labelledby="tab-mail">Everything that landed in your inbox.</div>
{/if}

Closing Tabs

closable gives every tab a close button, and a single tab can opt in or out on its own. The strip never removes a tab: the tabs are your markup, so onTabClose hands the value back and leaves the removal — and which tab takes over — to you.

<script>
  import { TabView, TabViewTab } from 'fluentui-svelte';

  let tabs = $state([
    { value: 'notes', label: 'Notes' },
    { value: 'draft', label: 'Draft' }
  ]);
  let activeTab = $state('notes');

  // The strip never removes a tab on its own: the tabs are your markup.
  const closeTab = (event, value) => {
    const index = tabs.findIndex((tab) => tab.value === value);
    tabs = tabs.filter((tab) => tab.value !== value);
    if (activeTab !== value) return;
    activeTab = tabs[Math.min(index, tabs.length - 1)]?.value ?? '';
  };
</script>

<TabView bind:activeTab closable onTabClose={closeTab}>
  {#each tabs as tab (tab.value)}
    <TabViewTab value={tab.value}>{tab.label}</TabViewTab>
  {/each}
</TabView>

New Tab Button

showNewTabButton adds a button at the end of the strip, outside the tablist so it never reads as a tab. onNewTab fires when it is activated.

<script>
  import { TabView, TabViewTab } from 'fluentui-svelte';

  let tabs = $state([{ value: 'tab-1', label: 'Tab 1' }]);
  let activeTab = $state('tab-1');

  const addTab = () => {
    const value = `tab-${tabs.length + 1}`;
    tabs.push({ value, label: `Tab ${tabs.length + 1}` });
    activeTab = value;
  };
</script>

<TabView bind:activeTab showNewTabButton onNewTab={addTab}>
  {#each tabs as tab (tab.value)}
    <TabViewTab value={tab.value}>{tab.label}</TabViewTab>
  {/each}
</TabView>

Tab Width

tabWidthMode decides how the tabs take their width: equal shares the strip evenly, size-to-content sizes every tab to its own label, and compact shrinks every resting tab to its icon and spells out only the selected one.

<TabView tabWidthMode="equal">...</TabView>
<TabView tabWidthMode="size-to-content">...</TabView>
<TabView tabWidthMode="compact">...</TabView>

Disabled

A disabled tab cannot be selected, and the arrow keys pass over it rather than landing on it.

<TabView activeTab="mail">
  <TabViewTab value="document">Document</TabViewTab>
  <TabViewTab value="mail">Mail</TabViewTab>
  <TabViewTab value="calendar" disabled>Calendar</TabViewTab>
</TabView>

Component Props (TabView)

Component Props (TabViewTab)

Keyboard Navigation

The strip is a single tab stop. ArrowLeft and ArrowRight walk the tabs, Home and End jump to the ends, Enter and Space select the focused tab, and Delete closes it when it is closable. disableTabspot hands the focus management back to you.

Accessibility

The strip renders a tablist and every tab a tab, so give the list a name through the aria-label you pass in listProps. Since you render what a tab opens, give that element a tabpanel role and point its aria-labelledby at the id of its tab.