# salla-tabs (https://docs.salla.dev/twilight/react/web-components/salla-tabs)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Tabbed container. Put one `salla-tab-header` in the `header` slot and one `salla-tab-content` in the `content`
slot for each tab, and give each pair the same `name`. The first header is selected on load, and clicking a header
selects it and its content. The component only toggles the `s-tabs-active` class on the header and the
`s-tabs-content-selected` class on the content; showing and hiding the content is done by styles for those classes.
It adds no ARIA roles or keyboard handling.

Tabs are collected once when the component loads, so tabs added or removed later are not picked up. Re-render the
whole `salla-tabs` element (for example by giving it a new `key`) to change the tabs.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-tabs>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaTabs } from '@salla.sa/twilight-components-react/tabs';
```

## Try it [#try-it]

<Demo name="web-components/salla-tabs" />

## Example [#example]

```tsx
import { SallaTabs } from '@salla.sa/twilight-components-react/tabs';
import { SallaTabHeader } from '@salla.sa/twilight-components-react/tab-header';
import { SallaTabContent } from '@salla.sa/twilight-components-react/tab-content';

export function Example() {
  return (
    <SallaTabs>
      <SallaTabHeader slot="header" name="description">Description</SallaTabHeader>
      <SallaTabHeader slot="header" name="reviews">Reviews</SallaTabHeader>
      <SallaTabContent slot="content" name="description">Product description</SallaTabContent>
      <SallaTabContent slot="content" name="reviews">Customer reviews</SallaTabContent>
    </SallaTabs>
  );
}
```

```html
<salla-tabs>
  <salla-tab-header slot="header" name="description">Description</salla-tab-header>
  <salla-tab-header slot="header" name="reviews">Reviews</salla-tab-header>
  <salla-tab-content slot="content" name="description">Product description</salla-tab-content>
  <salla-tab-content slot="content" name="reviews">Customer reviews</salla-tab-content>
</salla-tabs>
```

## Properties [#properties]

| Property          | Attribute          | Description                                                                                                                          | Type      | Default     |
| ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | --------- | ----------- |
| `backgroundColor` | `background-color` | Background color **Deprecated:** Not read by the component, so it has no effect. It will be removed in the next major version.       | `string`  | `undefined` |
| `vertical`        | `vertical`         | Align tabs vertically. **Deprecated:** Not read by the component, so it has no effect. It will be removed in the next major version. | `boolean` | `false`     |

## Slots [#slots]

| Slot      | Description                                                                             |
| --------- | --------------------------------------------------------------------------------------- |
| `content` | The active tab content section. `salla-tab-content` component is used for this purpose. |
| `header`  | The tab header section. `salla-tab-header` component is used for this purpose.          |

## Related [#related]

Used inside: [`<salla-loyalty>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty), [`<salla-loyalty-panel>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-panel), [`<salla-loyalty-program>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-program), [`<salla-product-size-guide>`](https://docs.salla.dev/twilight/react/web-components/salla-product-size-guide), [`<salla-reward-details>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-details).