# Tabs A simple and flexible way to organize content into multiple panels. It helps in structuring related information efficiently within a compact space. ## About The Tabs component takes the tab buttons in a `tabs` snippet and the panels as its children. A `Tab` and a `TabPanel` are paired by a matching `value`, not by the order they appear in. ## Tab Values Every `Tab` and every `TabPanel` takes a required `value`. A tab opens the panel that carries the same value, so the pairs are what link the two lists together. Use any string you like, as long as each pair is unique within one `Tabs`. ## Example Below is an example of how to implement the Tabs component in your Svelte project. Each tab is linked to a specific content panel, and when you click a tab, the respective content is displayed. ```html {#snippet tabs()} Tab 1 Tab 2 Tab 3 {/snippet} TabPanel 1 TabPanel 2 TabPanel 3 ``` - The `Tabs` component wraps both the `Tab` and `TabPanel` components. - Each `Tab` and `TabPanel` requires a `value` prop. A tab is linked to the panel with the same `value`, and clicking on a tab will show the associated content. - The first tab is selected by default. ## Variant The `variant` prop allows you to customize the style of the tabs. It accepts two values: `"tabs"` and `"pills"`. - `"tabs"`: Displays the tabs in a traditional horizontal layout with square or rectangular edges. - `"pills"`: Displays the tabs with rounded edges, giving them a pill-like appearance. By default, the `variant` is set to `"pills"`, giving the tabs a rounded pill-like design. You can change this to `"tabs"` if you prefer a more classic tab design with square edges. ```html ... ``` ## Animation Speed The `animationSpeed` prop controls the transition speed of the tabs when their style changes, like on hover or when a tab becomes active. Available values are `"none"`, `"slower"`, `"slow"`, `"normal"` (default), `"fast"` and `"faster"`. A panel fades in when it is shown; set `animationSpeed` to `"none"` to switch panels without the fade. ```html ... ``` ## Customization The `Tabs` component is highly customizable, allowing you to tailor its appearance and behavior to fit your design needs. You can adjust various parts of the component using the following props: ### Border Customization The `"border"` prop controls the border of the tabs. By default, it is set to `true`, which applies the default border style. You can pass a custom class or a `boolean` value to either enable or disable the border. - `true` (default): Applies the default border. - `false`: Disables the border. - `string`: You can pass a custom class for border styling. ```html ... ``` ### Customize the Tab Container The `"tabContainerClasses"` prop allows you to customize the tab list container. You can pass any valid Tailwind or custom class to modify the appearance of the tab list. ```html ... ``` ### Tab Customization To customize the tabs, use `"tabClasses"` ans `"tabActiveClasses"` props. The `"tabClasses"` prop applies to all tabs, while the `"tabActiveClasses"` prop is applied only to the active tab, overriding the styles from `"tabClasses"`. ```html ... ``` ### Panel Customization You can use the `"tabPanelClasses"` prop to customize the style of the tab panels. You can pass custom classes for margin, padding, background color, or any other styling. ```html ... ``` ### Customize Individual Component If you want to customize a specific `Tab` or `TabPanel` or event the `Tabs` component, you can use the native `class` attribute with that component. ```html {#snippet tabs()} Tab 1 Tab 2 Tab 3 {/snippet} TabPanel 1 TabPanel 2 TabPanel 3 ``` In the example above, the native `class` attribute is applied to the `Tabs` component, the second `Tab`, and the second `Tabpanel`. ## Accessibility The `Tabs` component follows the [WAI-ARIA Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). - **Built-in Accessibility Features**: The component includes essential ARIA attributes and roles: `role="tablist"` for the container that holds all tabs. - `role="tab"` for each tab with `aria-selected="true"` on the active one, and `aria-controls` pointing to its panel. - `role="tabpanel"` for each content section with `aria-labelledby` linking it to its respective tab. These attributes are what a screen reader reads to move through the tabs. - **Keyboard Navigation**: Users can move to the tabs using Tab key, and activate a tab with Enter or Space. Inside the tab list, Arrow Right and Arrow Left move to the next or previous tab (wrapping around at the ends), and Home and End move to the first or last tab. The focused tab is activated right away. - **Customization Considerations**: When applying custom styles, ensure **focus indicators** remain visible, **contrast is sufficient**, and **animations do not disrupt usability**, particularly for users with motion sensitivity. By following these best practices, the Tabs component provides an inclusive and accessible experience. ## Configuration ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `variant` | 'tabs' \| 'pills' | `pills` | Defines the visual style of the tabs. By default, the variant is set to 'pills'. | | `animationSpeed` | [ANIMATE_SPEED](https://www.theui.dev/docs/types#animation-speed-type) | `normal` | Defines the speed of tab transitions. The default value is 'normal'. Set it to 'none' to show the panels without the fade effect. | | `border` | boolean \| string | `true` | Controls whether the border styling is applied to the tabs. Can be a boolean or a custom string for classes. | | `tabContainerClasses` | string | `` | Custom classes for the tab list container. | | `tabClasses` | string | `` | Custom classes for each tab element. | | `tabActiveClasses` | string | `` | Custom classes applied to the active tab. | | `tabPanelClasses` | string | `` | Custom classes for each tab panel. | | `id` | string | `` | An optional unique identifier for the Tabs component. | ### Tab props | Name | Type | Default | Description | | --- | --- | --- | --- | | `value` | string | `` | Links the tab to the `TabPanel` with the same value. Each value is used once per `Tabs`. | | `children` | Snippet | `` | The label of the tab. | | `class` | string | `null` | Classes for this tab only, merged with `tabClasses` of the `Tabs`. Any other attribute is passed to the tab element. | ### TabPanel props | Name | Type | Default | Description | | --- | --- | --- | --- | | `value` | string | `` | Links the panel to the `Tab` with the same value. | | `children` | Snippet | `` | The content of the panel. | | `class` | string | `null` | Classes for this panel only, merged with `tabPanelClasses` of the `Tabs`. Any other attribute is passed to the panel element. | ### Snippets | Name | Description | | --- | --- | | `tabs` | The list of tab elements to be displayed inside the Tabs component. | | `children` | The list of tab panels. Each `TabPanel` is linked to the `Tab` with the same `value`. | --- Category: Components Keywords: tabs, navigation, pills, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss Full documentation set: https://www.theui.dev/llms-full.txt