---
title: Tabs
description: Tabs allow users to navigate between multiple sections of related content without leaving the page.
category: Navigation
related: [Accordions, FileTabs, Container]
commonPatterns: [settings-tabs, content-tabs, navigation-tabs]
---

Source: https://clickhouse.design/click-ui/tabs

# Tabs

Tabs organise content into multiple panels, keeping the interface clean while allowing quick access to each section. They're perfect for organizing related content without overwhelming the user.

## Example

## Props

| Prop          | Type                          | Default value | Description                                                                                    |
| ------------- | ----------------------------- | ------------- | ---------------------------------------------------------------------------------------------- |
| defaultValue  | `string`                      | `undefined`   | Default selected tab value for uncontrolled tabs                                               |
| value         | `string`                      | `undefined`   | Currently selected tab value for controlled tabs                                               |
| onValueChange | `({ value: string }) => void` | `undefined`   | Callback function called when the selected tab changes. Receives an object with the new value. |
| ariaLabel     | `string`                      | `undefined`   | ARIA label for accessibility, describing the purpose of the tab group                          |

```tsx
import { Tabs } from '@clickhouse/click-ui'

function MyTabs() {
return (
  <Tabs defaultValue="tab1">
    <Tabs.TriggersList>
      <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
      <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    </Tabs.TriggersList>
    <Tabs.Content value="tab1">Content 1</Tabs.Content>
    <Tabs.Content value="tab2">Content 2</Tabs.Content>
  </Tabs>
)
}
```

## Quick start

```tsx
import { Tabs, Container, Text } from '@clickhouse/click-ui'

function MyTabs() {
return (
  <Tabs defaultValue="tab1">
    <Tabs.TriggersList>
      <Tabs.Trigger value="tab1">Overview</Tabs.Trigger>
      <Tabs.Trigger value="tab2">Settings</Tabs.Trigger>
      <Tabs.Trigger value="tab3">Advanced</Tabs.Trigger>
    </Tabs.TriggersList>
    <Tabs.Content value="tab1">
      <Container padding="md">
        <Text>Overview content</Text>
      </Container>
    </Tabs.Content>
    <Tabs.Content value="tab2">
      <Container padding="md">
        <Text>Settings content</Text>
      </Container>
    </Tabs.Content>
    <Tabs.Content value="tab3">
      <Container padding="md">
        <Text>Advanced content</Text>
      </Container>
    </Tabs.Content>
  </Tabs>
)
}
```

## Related components

- **Accordions**: For collapsible content sections, an alternative to tabs.
- **FileTabs**: For file-based tab interfaces with drag-and-drop reordering.
- **Container**: For organizing content within tab panels.

## Common use cases

### Settings tabs

```tsx
import { Tabs, Container, Text } from '@clickhouse/click-ui'

function SettingsTabs() {
return (
  <Tabs defaultValue="general">
    <Tabs.TriggersList>
      <Tabs.Trigger value="general">General</Tabs.Trigger>
      <Tabs.Trigger value="security">Security</Tabs.Trigger>
    </Tabs.TriggersList>
    <Tabs.Content value="general">
      <Container padding="md">
        <Text>General settings</Text>
      </Container>
    </Tabs.Content>
    <Tabs.Content value="security">
      <Container padding="md">
        <Text>Security settings</Text>
      </Container>
    </Tabs.Content>
  </Tabs>
)
}
```

### Content tabs

```tsx
import { Tabs, Container, Text } from '@clickhouse/click-ui'

function ContentTabs() {
return (
  <Tabs defaultValue="description">
    <Tabs.TriggersList>
      <Tabs.Trigger value="description">Description</Tabs.Trigger>
      <Tabs.Trigger value="reviews">Reviews</Tabs.Trigger>
    </Tabs.TriggersList>
    <Tabs.Content value="description">
      <Container padding="md">
        <Text>Description content</Text>
      </Container>
    </Tabs.Content>
    <Tabs.Content value="reviews">
      <Container padding="md">
        <Text>Reviews content</Text>
      </Container>
    </Tabs.Content>
  </Tabs>
)
}
```

## FullWidthTabs

FullWidthTabs is a variant of Tabs where the tab triggers expand to fill the available width. Triggers can either grow equally or have explicit widths set.

```tsx
import { FullWidthTabs, Tabs, Container, Text } from '@clickhouse/click-ui'

function MyFullWidthTabs() {
return (
  <FullWidthTabs defaultValue="tab1">
    <FullWidthTabs.TriggersList>
      <FullWidthTabs.Trigger value="tab1">Tab 1</FullWidthTabs.Trigger>
      <FullWidthTabs.Trigger value="tab2">Tab 2</FullWidthTabs.Trigger>
    </FullWidthTabs.TriggersList>
    <Tabs.Content value="tab1">
      <Container padding="md">
        <Text>Content 1</Text>
      </Container>
    </Tabs.Content>
    <Tabs.Content value="tab2">
      <Container padding="md">
        <Text>Content 2</Text>
      </Container>
    </Tabs.Content>
  </FullWidthTabs>
)
}
```

### FullWidthTabs.Trigger Props

The FullWidthTabs.Trigger accepts an optional `width` prop:

| Prop  | Type     | Default value | Description                                                                                |
| ----- | -------- | ------------- | ------------------------------------------------------------------------------------------ |
| width | `string` | `undefined`   | Explicit width for the trigger. If not set, triggers grow equally to fill available space. |

```tsx
<FullWidthTabs.Trigger value="tab1" width="200px">
Fixed Width Tab
</FullWidthTabs.Trigger>
```

## FileTabs

FileTabs are used to display a list of files in a tabbed interface such as in the Query Editor. They support drag-and-drop reordering and closing individual tabs.

### FileTabs Props

| Prop          | Type                                            | Default value | Description                                                        |
| ------------- | ----------------------------------------------- | ------------- | ------------------------------------------------------------------ |
| selectedIndex | `number`                                        | `-`           | Index of the currently selected tab                                |
| onReorderTab  | `(source: number, destination: number) => void` | `-`           | Callback function called when a tab is reordered via drag-and-drop |
| onClose       | `(index: number) => void`                       | `-`           | Callback function called when a tab is closed                      |
| onSelect      | `(index: number) => void`                       | `-`           | Callback function called when a tab is selected                    |

```tsx
import { FileTabs } from '@clickhouse/click-ui'
import { useState } from 'react'

function MyFileTabs() {
const [selected, setSelected] = useState(0)
const [tabs, setTabs] = useState(['File 1', 'File 2'])
return (
  <FileTabs
    selectedIndex={selected}
    onSelect={setSelected}
    onReorderTab={(source, dest) => {}}
    onClose={(index) => {}}
  >
    {tabs.map((label, index) => (
      <FileTabs.Tab
        key={label}
        index={index}
        icon="code-in-square"
        text={label}
      />
    ))}
  </FileTabs>
)
}
```