# Tabs Configuration

To initialize tabs inside the TabStrip, nest them as [`TabStripTab`](https://www.telerik.com/kendo-angular-ui/components/layout/api/tabstriptabcomponent) components inside the `<kendo-tabstrip>` tag and use their corresponding properties.

The TabStrip provides the following configuration options for its tabs:

<Row>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#selected-tab">
      <ComponentTitle>Selected Tab</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Set the initially selected tab or switch tabs programmatically using the selectTab() method.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#disabled-tabs">
      <ComponentTitle>Disabled Tabs</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Prevent user interaction with specific tabs using the disabled property.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#tab-titles">
      <ComponentTitle>Tab Titles</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Set tab titles using the title property or custom templates with kendoTabTitle.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#tab-position">
      <ComponentTitle>Tab Position</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Control tab placement with top, right, bottom, or left positioning options.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#tab-alignment">
      <ComponentTitle>Tab Alignment</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Align tabs using start, end, center, justify, or stretched alignment options.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#closable-tabs">
      <ComponentTitle>Closable Tabs</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Render close buttons inside tabs to allow users to remove them dynamically.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#scrollable-tabs">
      <ComponentTitle>Scrollable Tabs</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Enable scrolling through tabs when the tab list exceeds component boundaries.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Selected Tab

When the TabStrip is initially loaded, it doesn't display any tabs as selected. To visualize a tab as selected, set its [`selected`](https://www.telerik.com/kendo-angular-ui/components/layout/api/tabstriptabcomponent#title) property to `true`.

To switch tabs programmatically at runtime, call the [`selectTab(index)`](https://www.telerik.com/kendo-angular-ui/components/layout/api/tabstripcomponent#selecttab) method on the `TabStripComponent` instance obtained via `@ViewChild`. Note that calling `selectTab()` does not fire the `tabSelect` event.

The following example demonstrates a checkout wizard where the **Back** and **Next** buttons navigate between tabs by calling `selectTab()`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/tabstrip/tabs/source.txt)

## Disabled Tabs

You can disable a specific TabStrip tab by setting the [`disabled`](https://www.telerik.com/kendo-angular-ui/components/layout/api/tabstriptabcomponent#disabled) property to `true`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/tabstrip/tabs/disabled-tabs/source.txt)

## Tab Titles

Use one of the following approaches to provide the tab title:

* Set the TabStripTab [`title`](https://www.telerik.com/kendo-angular-ui/components/layout/api/tabstriptabcomponent#title) option.
* Use the [`kendoTabTitle`](https://www.telerik.com/kendo-angular-ui/components/layout/api/tabtitledirective) template directive to render any custom content.

> The `kendoTabTitle` directive overrides the TabStripTab `title` option.

The following example demonstrates both approaches for setting the tab title.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/tabstrip/tabs/titles/source.txt)

## Tab Position

You can control the position of the tabs by setting the [`tabPosition`](https://www.telerik.com/kendo-angular-ui/components/layout/api/tabstripcomponent#tabposition) property of the TabStrip to `top`, `right`, `bottom`, or `left`. The default position is `top`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/tabstrip/tabs/position/source.txt)

## Tab Alignment

You can control the alignment of the tabs by setting the [`tabAlignment`](https://www.telerik.com/kendo-angular-ui/components/layout/api/tabstripcomponent#tabalignment) property of the TabStrip to `start`, `end`, `center`, `justify`, or `stretched`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/tabstrip/tabs/alignment/source.txt)

## Closable Tabs

The TabStrip enables you to render a `close` button inside each tab. For further details and runnable demos, refer to the article about [`Closable tabs`](https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/closable).

## Scrollable Tabs

The TabStrip allows you to scroll through its tabs when the tab list cannot fit in the component boundaries. For further details and runnable demos, refer to the article about [`Scrollable tabs`](https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/scrollable).

## Suggested Links

* [API Reference of the TabStripTab Component](https://www.telerik.com/kendo-angular-ui/components/layout/api/tabstripcomponent)
* [API Reference of the TabStrip](https://www.telerik.com/kendo-angular-ui/components/layout/api/tabstripcomponent)