# Tabs Use tabs to quickly switch between different views and pages. ```svelte Tab 1 Tab 2 Tab 3 Content for Tab 1 Content for Tab 2 Content for Tab 3 ``` ## Fluid Width ```svelte Tab 1 Tab 2 Tab 3 Content for Tab 1 Content for Tab 2 Content for Tab 3 ``` ## Vertical ```svelte Tab 1 Tab 2 Tab 3 Content for Tab 1 Content for Tab 2 Content for Tab 3 ``` ## Direction ```svelte 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 | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | value | - | () => TabsApi\ | | element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | children | - | Snippet\<\[() => TabsApi\]> | | element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | value | - | string — The value of the tab | | disabled | - | boolean \| undefined — Whether the tab is disabled | | element | - | Snippet\<\[HTMLAttributes\<"button">]> \| undefined — Render the element yourself | | element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself | | value | - | string — The value of the tab | | element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |