---
title: TabSheet
description: TabSheet
element: vaadin-tabsheet
---

## Description

`<vaadin-tabsheet>` is a Web Component for organizing and grouping content
into scrollable panels. The panels can be switched between by using tabs.

```html
<vaadin-tabsheet>
  <div slot="prefix">Prefix</div>
  <div slot="suffix">Suffix</div>

  <vaadin-tabs slot="tabs">
    <vaadin-tab id="tab-1">Tab 1</vaadin-tab>
    <vaadin-tab id="tab-2">Tab 2</vaadin-tab>
    <vaadin-tab id="tab-3">Tab 3</vaadin-tab>
  </vaadin-tabs>

  <div tab="tab-1">Panel 1</div>
  <div tab="tab-2">Panel 2</div>
  <div tab="tab-3">Panel 3</div>
</vaadin-tabsheet>
```

### Styling

The following shadow DOM parts are exposed for styling:

Part name | Description
--------- | ---------------
`tabs-container`    | The container for the slotted prefix, tabs and suffix
`content`    | The container for the slotted panels

The following state attributes are available for styling:

Attribute         | Description
------------------|-------------
`loading` | Set when a tab without associated content is selected
`overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.

The following custom CSS properties are available for styling:

Custom CSS property                  |
:------------------------------------|
| `--vaadin-tabsheet-border-color`   |
| `--vaadin-tabsheet-border-radius`  |
| `--vaadin-tabsheet-border-width`   |
| `--vaadin-tabsheet-gap`            |
| `--vaadin-tabsheet-padding`        |

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

## Properties

### items

**Type:** `Tab[] | undefined`

A read-only list of `<vaadin-tab>`s from which a selection can be made.
It is populated from the elements passed inside the slotted
`<vaadin-tabs>`, and updated dynamically when adding or removing items.

### selected

**Type:** `number | null | undefined`

The index of the selected tab.

## Events

### items-changed

**Type:** [TabSheetItemsChangedEvent](#tabsheetitemschangedevent)

Fired when the `items` property changes.

### selected-changed

**Type:** [TabSheetSelectedChangedEvent](#tabsheetselectedchangedevent)

Fired when the `selected` property changes.

## Types

### TabSheetItemsChangedEvent

```ts
/**
 * Fired when the `items` property changes.
 */
export type TabSheetItemsChangedEvent = CustomEvent<{ value: Tab[] }>;
```

### TabSheetSelectedChangedEvent

```ts
/**
 * Fired when the `selected` property changes.
 */
export type TabSheetSelectedChangedEvent = CustomEvent<{ value: number }>;
```