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

This is content for Tab 3.

Props

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

Quick Start

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>
)
}

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

General settings content

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

Product description content

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>
)
}

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.

Tab 1

Tab 2

Tab 3

FileTabs Props

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

Link File Tabs