# Tabs
Use tabs to quickly switch between different views and pages.
```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
Tab 1
Tab 2
Tab 3
Content for Tab 1
Content for Tab 2
Content for Tab 3
);
}
```
## Fluid Width
```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';
export default function Fluid() {
return (
Tab 1
Tab 2
Tab 3
Content for Tab 1
Content for Tab 2
Content for Tab 3
);
}
```
## Vertical
```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';
export default function Vertical() {
return (
Tab 1
Tab 2
Tab 3
Content for Tab 1
Content for Tab 2
Content for Tab 3
);
}
```
## Direction
```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
Tab 1
Tab 2
Tab 3
Content for Tab 1
Content for Tab 2
Content for Tab 3
);
}
```
## API Reference
| Property | Default | Type |
| -------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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.
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. |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| value | - | TabsApi\ |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| children | - | (tabs: TabsApi\) => ReactNode |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| 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 |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| value | - | string — The value of the tab |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |