# Tabs

Use tabs to quickly switch between different views and pages.

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

export default function Default() {
	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 Width

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

export default function Fluid() {
	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>
	);
}

```

## Vertical

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

export default function Vertical() {
	return (
		<Tabs defaultValue="tab-1" orientation="vertical">
			<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>
	);
}

```

## Direction

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

export default function Dir() {
	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

### TabsRootProps

| Property        | Default      | Type                                                                                                                                               | Description                                                                                                                                                                                                       |
| --------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ids?            | -            | Partial\<\{ root: string; trigger: (value: string) => string; list: string; content: (value: string) => 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.&#xA;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\`&#xA;- \`horizontal\`: only left and right arrow key navigation will work.&#xA;- \`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\`&#xA;- \`manual\`: Tabs are activated when clicked or press \`enter\` key.&#xA;- \`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.&#xA;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.                                                                                                                        |
| element?        | -            | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                     | Render the element yourself                                                                                                                                                                                       |

### TabsRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | TabsApi\<PropTypes>                                            | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TabsRootContextProps

| Property | Default | Type                                     | Description |
| -------- | ------- | ---------------------------------------- | ----------- |
| children | -       | (tabs: TabsApi\<PropTypes>) => ReactNode | -           |

### TabsListProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TabsTriggerProps

| Property  | Default | Type                                                              | Description                 |
| --------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| value     | -       | string                                                            | The value of the tab        |
| disabled? | -       | boolean \| undefined                                              | Whether the tab is disabled |
| element?  | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### TabsIndicatorProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TabsContentProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | string                                                         | The value of the tab        |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |