Tabs - Skeleton

Content for Tab 1

'use client';

import { Tabs } from '@skeletonlabs/skeleton-react';

export default function () {
  return (
    <Tabs defaultValue="tab-1">
      <Tabs.List>
        <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
        <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
        <Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
      <Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
      <Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
    </Tabs>
  );
}

Fluid

Content for Tab 1

'use client';

import { Tabs } from '@skeletonlabs/skeleton-react';

export default function () {
  return (
    <Tabs defaultValue="tab-1">
      <Tabs.List>
        <Tabs.Trigger className="flex-1" value="tab-1">
          Tab 1
        </Tabs.Trigger>
        <Tabs.Trigger className="flex-1" value="tab-2">
          Tab 2
        </Tabs.Trigger>
        <Tabs.Trigger className="flex-1" value="tab-3">
          Tab 3
        </Tabs.Trigger>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
      <Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
      <Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
    </Tabs>
  );
}

RTL

Content for Tab 1

'use client';

import { Tabs } from '@skeletonlabs/skeleton-react';

export default function () {
  return (
    <Tabs defaultValue="tab-1" dir="rtl">
      <Tabs.List>
        <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
        <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
        <Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
      <Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
      <Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
    </Tabs>
  );
}

API Reference

Root

Property	Default	Type
`className`	"w-full"	string \| undefined The base classes provided by Skeleton
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself
`ids`	-	Partial<{ root: string; trigger: string; list: string; content: string; indicator: string; }> \| undefined The ids of the elements in the tabs. Useful for composition.
`translations`	-	IntlTranslations \| undefined Specifies the localized strings that identifies the accessibility elements and their states
`loopFocus`	true	boolean \| undefined Whether the keyboard navigation will loop from last tab to first, and vice versa.
`value`	-	string \| null \| undefined The controlled selected tab value
`defaultValue`	-	string \| null \| undefined The initial selected tab value when rendered. Use when you don't need to control the selected tab value.
`orientation`	"horizontal"	"horizontal" \| "vertical" \| undefined The orientation of the tabs. Can be `horizontal` or `vertical` - `horizontal`: only left and right arrow key navigation will work. - `vertical`: only up and down arrow key navigation will work.
`activationMode`	"automatic"	"manual" \| "automatic" \| undefined The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus
`onValueChange`	-	((details: ValueChangeDetails) => void) \| undefined Callback to be called when the selected/active tab changes
`onFocusChange`	-	((details: FocusChangeDetails) => void) \| undefined Callback to be called when the focused tab changes
`composite`	-	boolean \| undefined Whether the tab is composite
`deselectable`	-	boolean \| undefined Whether the active tab can be deselected when clicking on it.
`navigate`	-	((details: NavigateDetails) => void) \| null \| undefined Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	-	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

RootContext

Property	Default	Type
`children`	-	(context: TabsRootContextType) => ReactNode

List

Property	Default	Type
`className`	"flex gap-2 border-b border-surface-200-800 mb-4 relative"	string \| undefined The base classes provided by Skeleton
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself

Trigger

Property	Default	Type
`className`	"btn hover:preset-tonal-primary mb-2 data-disabled:opacity-50 data-disabled:pointer-events-none"	string \| undefined The base classes provided by Skeleton
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself
`value`	-	string The value of the tab
`disabled`	-	boolean \| undefined Whether the tab is disabled

Indicator

Property	Default	Type
`className`	"h-0.5 bottom-0 w-(--width) bg-surface-950-50"	string \| undefined The base classes provided by Skeleton
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself

Content

Property	Default	Type
`className`	""	string \| undefined The base classes provided by Skeleton
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself
`value`	-	string The value of the tab