# TabViewItem

`TabViewItem` is the control used to populate the TabView. It displays the header of the tab item and the corresponding content. `TabViewItem` exposes the following properties:

* `HeaderText` (`string`)—Defines a simple text for the TabView item.
* `ImageSource` (`ImageSource`)—Specifies the source of the image icon in the header item.
* `IsSelected` (`bool`)—Indicated whether the item is selected.
* `IsEnabled` (`bool`)—Defines whether the TabView Item is enabled/disabled. By default `IsEnabled` is `True`.
* `IsVisible` (`bool`)—Specifies whether the TabView Item is visible/hidden.
* `Content` (`Microsoft.Maui.Controls.View`)—Defines the content of the TabView Item. You can use any UI element that implements the `View` class.
* `ContentTemplate` (`DataTemplate`)—Defines the content template that is displayed when the current tab is selected.

## Displaying TabViewItem

To display a `TabViewItem`, you can add it to the `Items` collection of `TabView` or use the [TabView ItemsSource](https://www.telerik.com/maui-ui/documentation/controls/tabview/data-binding).

### Example

The following example shows how to add TabView items directly to the Items collection:

```XAML
<telerik:RadTabView x:Name="tabView">
	<telerik:TabViewItem HeaderText="Home" />
	<telerik:TabViewItem HeaderText="Folder" />
	<telerik:TabViewItem HeaderText="View" />
</telerik:RadTabView>
```

```C#
var tabView = new RadTabView();
tabView.Items.Add(new Telerik.Maui.Controls.TabViewItem { HeaderText="Home" });
tabView.Items.Add(new Telerik.Maui.Controls.TabViewItem { HeaderText = "Folder" });
tabView.Items.Add(new Telerik.Maui.Controls.TabViewItem { HeaderText = "View" });
```

## Defining Content

You can define the content of a `TabViewItem` via its `Content` property or `ContentTemplate` property.

## Example with Content Property

```XAML
<telerik:RadTabView x:Name="tabView" AutomationId="tabView">
    <telerik:TabViewItem HeaderText="Home">
        <Label Margin="10" Text="This is the content of the Home tab" />
    </telerik:TabViewItem>
    <telerik:TabViewItem HeaderText="Folder">
        <Label Margin="10" Text="This is the content of the Folder tab" />
    </telerik:TabViewItem>
    <telerik:TabViewItem HeaderText="View">
        <Label Margin="10" Text="This is the content of the View tab" />
    </telerik:TabViewItem>
</telerik:RadTabView>
```

```C#
RadTabView tabView = new RadTabView();
Telerik.Maui.Controls.TabViewItem homeTab = new Telerik.Maui.Controls.TabViewItem()
{
    HeaderText = "Home",
    Content = new Label() { Text = "This is the content of the Home tab", Margin = new Thickness(10) },
};
Telerik.Maui.Controls.TabViewItem folderTab = new Telerik.Maui.Controls.TabViewItem()
{
    HeaderText = "Folder",
    Content = new Label() { Text = "This is the content of the Folder tab", Margin = new Thickness(10) },
};
Telerik.Maui.Controls.TabViewItem viewTab = new Telerik.Maui.Controls.TabViewItem()
{
    HeaderText = "View",
    Content = new Label() { Text = "This is the content of the View tab", Margin = new Thickness(10) },
};
tabView.Items.Add(homeTab);
tabView.Items.Add(folderTab);
tabView.Items.Add(viewTab);
```

> The TabView control displays only the content of the selected item.

## See Also

* [Selection](https://www.telerik.com/maui-ui/documentation/controls/tabview/selection)
* [Styling](https://www.telerik.com/maui-ui/documentation/controls/tabview/styling/overview)