# Tabs

Tabs are labeled controls that allow users to switch between multiple views within a page.

Tabs: [Guidelines](/components/web/tabs/tabs.guidelines.md) · [Code](/components/web/tabs/tabs.code.md) · [Content](/components/web/tabs/tabs.content.md)

## Features

- Tab items can be either buttons or links.

- Allows showing a count next to tab items.

- Can be controlled or uncontrolled.

## Examples

### With disabled tab

Making a tab disabled can be a useful design approach in situations where certain tabs should not be accessible or selectable by the user. Reasons for making a tab disabled include incomplete content, user permissions, contextual relevance, and user flow guidance.

```tsx
<Tabs defaultValue="tab1">
    <Tabs.TriggerList aria-label="tabs example">
        <Tabs.Trigger value="tab1">
            <Tabs.TriggerText text="Inbox" />
        </Tabs.Trigger>
        <Tabs.Trigger value="tab2" disabled>
            <Tabs.TriggerText text="Scheduled" />
        </Tabs.Trigger>
        <Tabs.Trigger value="tab3">
            <Tabs.TriggerText text="Paid" />
        </Tabs.Trigger>
    </Tabs.TriggerList>
    <Tabs.Content value="tab1">Inbox Content</Tabs.Content>
    <Tabs.Content value="tab2">Scheduled Content</Tabs.Content>
    <Tabs.Content value="tab3">Paid Content</Tabs.Content>
</Tabs>
```

### With tab links

By default, tab triggers will be button elements. But links can also be used by nesting nesting a link element within the trigger as passing an `asChild` prop to the trigger itself. Whether or not you should use links or buttons [depends on the task at hand](https://inclusive-components.design/tabbed-interfaces/).

```tsx
<Tabs defaultValue="tab1" activationMode="manual">
    <Tabs.TriggerList>
        <Tabs.Trigger value="tab1" asChild>
            <Link href="#with-tab-links">
                <Tabs.TriggerText text="Inbox" />
            </Link>
        </Tabs.Trigger>
        <Tabs.Trigger value="tab2" asChild>
            <Link href="#with-tab-links">
                <Tabs.TriggerText text="Scheduled" />
            </Link>
        </Tabs.Trigger>
        <Tabs.Trigger value="tab3" asChild>
            <Link href="#with-tab-links">
                <Tabs.TriggerText text="Paid" />
            </Link>
        </Tabs.Trigger>
    </Tabs.TriggerList>
    <Tabs.Content value="tab1">Inbox Content</Tabs.Content>
    <Tabs.Content value="tab2">Scheduled Content</Tabs.Content>
    <Tabs.Content value="tab3">Paid Content</Tabs.Content>
</Tabs>
```

### With tab counters

A count can be shown next to the text of a tab to provide users with additional information about the contents of the tab. Showing a count can also add visual interest and help users differentiate between tabs more easily.

```tsx
<Tabs defaultValue="tab1">
    <Tabs.TriggerList>
        <Tabs.Trigger value="tab1">
            <Tabs.TriggerText text="Inbox" />
            <Tabs.TriggerCounter counter={3} />
        </Tabs.Trigger>
        <Tabs.Trigger value="tab2">
            <Tabs.TriggerText text="Scheduled" />
            <Tabs.TriggerCounter counter={999} />
        </Tabs.Trigger>
        <Tabs.Trigger value="tab3">
            <Tabs.TriggerText text="Paid" />
        </Tabs.Trigger>
    </Tabs.TriggerList>
    <Tabs.Content value="tab1">Inbox Content</Tabs.Content>
    <Tabs.Content value="tab2">Scheduled Content</Tabs.Content>
    <Tabs.Content value="tab3">Paid Content</Tabs.Content>
</Tabs>
```

## Accessibility

Adheres to the [Tabs WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel). See [Radix documentation](https://www.radix-ui.com/docs/primitives/components/tabs#accessibility) for details.

## Related components

- [Filter menu](/components/web/filter-menu/filter-menu.guidelines): A component used to apply category-specific filters for a dataset.
- [Radio group](/components/web/radio-group/radio-group.guidelines): A form element that enables users to select a single value from a list of options.
- [Segmented control](/components/web/segmented-control/segmented-control.guidelines): A hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views.