---
title: Tab
description: Tab
element: vaadin-tab
---

## Description

`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.

```html
<vaadin-tab>Tab 1</vaadin-tab>
```

The following state attributes are available for styling:

Attribute      | Description
---------------|---------------------------------
`disabled`     | Set when the element is disabled
`focused`      | Set when the element is focused
`focus-ring`   | Set when the element is keyboard focused
`selected`     | Set when the tab is selected
`active`       | Set when mousedown or enter/spacebar pressed
`orientation`  | Set to `horizontal` or `vertical` depending on the direction of items
`has-tooltip`  | Set when the tab has a slotted tooltip

The following custom CSS properties are available for styling:

Custom CSS property            |
:------------------------------|
| `--vaadin-tab-background`    |
| `--vaadin-tab-border-color`  |
| `--vaadin-tab-border-width`  |
| `--vaadin-tab-font-size`     |
| `--vaadin-tab-font-weight`   |
| `--vaadin-tab-gap`           |
| `--vaadin-tab-padding`       |
| `--vaadin-tab-text-color`    |

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

## Properties

### disabled

**Type:** `boolean`

If true, the user cannot interact with this element.

### selected

**Type:** `boolean`

If true, the item is in selected state.

### value

**Type:** `string`

Submittable string value. The default value is the trimmed text content of the element.