# Tabs

> AstrolTabs: Blazor tabs with icons, badges, disabled tabs, keyboard (arrows, Home, End), @bind-ActiveTabIndex and panels that keep their state.

Source page: https://doc.astrolui.com/basic-component/tabs

Accessible tabs, underlined or as buttons.

## 1. Demo AstrolTabs

Each **AstrolContentTab** is a tab: its **Title** (with optional **Icon** and **Badge**) goes in the list and its content in the panel. With focus on the list, the arrows, **Home** and **End** change tab and skip disabled ones.

```razor
@using Astrol.Component.Basic.Tabs

<AstrolTabs @bind-ActiveTabIndex="active" AriaLabel="Customer">
    <AstrolContentTab Title="General" Icon="astrol-user">
        <p>Name, email and phone...</p>
    </AstrolContentTab>
    <AstrolContentTab Title="Orders" Icon="astrol-basket" Badge="3">
        <p>The last orders...</p>
    </AstrolContentTab>
    <AstrolContentTab Title="Billing" Icon="astrol-credit-card" Disabled="true">
        ...
    </AstrolContentTab>
</AstrolTabs>

@code {
    private int active;
}
```

The customer's name, email and phone.

The customer's last orders.

## 2. Buttons and panels that keep their state

**Pills** shows the tabs as buttons. By default only the active panel exists; with **KeepAlive** the others stay hidden in the page and keep what was typed: type something, switch tab and come back.

```razor
@* Pills: buttons instead of underline. KeepAlive: hidden tabs keep what was typed *@
<AstrolTabs Pills="true" KeepAlive="true">
    <AstrolContentTab Title="Notes">
        <AstrolContentInput><textarea></textarea></AstrolContentInput>
    </AstrolContentTab>
    <AstrolContentTab Title="Preview">...</AstrolContentTab>
</AstrolTabs>
```

Type something and switch tab

Go back to «Notes»: the text is still there.

### Supported parameters

**AstrolTabs**

- ActiveTabIndex **(int)**, active tab from 0; binds with **@bind-ActiveTabIndex** (default **0**).
- Pills **(bool)**, tabs as rounded buttons (default **false**, underlined).
- KeepAlive **(bool)**, keeps inactive panels hidden so they keep their state (default **false**).
- AriaLabel **(string)**, accessible text of the tab list.
- Class **(string)**, extra css class.
- SelectAsync(int) **(method)**, activates a tab from code.

**AstrolContentTab**

- Title **(string)**, tab text.
- Icon **(string)**, **astrol-*** icon (optional).
- Badge **(string)**, short text next to the title, e.g. a counter (optional).
- Disabled **(bool)**, disabled tab (default **false**).
- ChildContent **(RenderFragment)**, panel content.

Tabs follow the order in which they are created; one that appears later (inside an **@if**) is added at the end.