---
title: File tabs
description: File Tabs displays a horizontal list of file tabs that can be selected, reordered via drag-and-drop, and closed individually.
category: Navigation
related: [Tabs, Container]
commonPatterns: [editor-tabs, file-manager-tabs]
---

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

# File tabs

File Tabs provides a tabbed interface for managing multiple files or documents. Tabs can be reordered via drag-and-drop, closed individually, and display status indicators. Perfect for code editors and file managers.

## Example

## Props

| Prop          | Type                                                              | Default value | Description                                                                                                  |
| ------------- | ----------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------ |
| selectedIndex | `number`                                                          | `0`           | Index of the currently selected/active tab                                                                   |
| onSelect      | `(index: number) => void`                                         | `undefined`   | Callback function called when a tab is selected. Receives the tab index.                                     |
| onClose       | `(index: number) => void`                                         | `undefined`   | Callback function called when a tab is closed. Receives the tab index.                                       |
| onReorderTab  | `(sourcePosition: number, destinationPosition: number) => void`   | `undefined`   | Callback function called when a tab is reordered via drag-and-drop. Receives source and destination indices. |
| children      | `ReactElement<FileTabProps> \| Array<ReactElement<FileTabProps>>` | `undefined`   | FileTabs.Tab components to display as tabs                                                                   |

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

function MyFileTabs() {
const [selectedIndex, setSelectedIndex] = useState(0)
return (
  <FileTabs
    selectedIndex={selectedIndex}
    onSelect={setSelectedIndex}
    onClose={(index) => {}}
    onReorderTab={(source, dest) => {}}
  >
    <FileTabs.Tab index={0} text="File1.tsx" />
    <FileTabs.Tab index={1} text="File2.tsx" />
  </FileTabs>
)
}
```

### FileTabs.Tab Props

| Prop    | Type                                                                     | Default value | Description                                                              |
| ------- | ------------------------------------------------------------------------ | ------------- | ------------------------------------------------------------------------ |
| text    | `string`                                                                 | `undefined`   | Text label displayed in the tab                                          |
| index   | `number`                                                                 | `undefined`   | Unique index of this tab, used for selection and reordering. Required.   |
| status  | `"default" \| "success" \| "neutral" \| "danger" \| "warning" \| "info"` | `"default"`   | Visual status indicator that determines the tab color                    |
| icon    | `IconName \| ReactNode`                                                  | `undefined`   | Icon name or React node to display in the tab                            |
| preview | `boolean`                                                                | `false`       | Whether the tab is in preview mode (typically shown with italic styling) |
| onClose | `() => void`                                                             | `undefined`   | Callback function called when the tab close button is clicked            |

```tsx
<FileTabs.Tab
index={0}
text="File.tsx"
status="success"
icon="code-in-square"
/>
```

## Quick start

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

function MyFileTabs() {
const [selectedIndex, setSelectedIndex] = useState(0)
return (
  <FileTabs
    selectedIndex={selectedIndex}
    onSelect={setSelectedIndex}
    onClose={(index) => {}}
    onReorderTab={(source, dest) => {}}
  >
    <FileTabs.Tab index={0} text="File1.tsx" />
    <FileTabs.Tab index={1} text="File2.tsx" />
  </FileTabs>
)
}
```

## Related components

- **Tabs**: For general tabbed interfaces without drag-and-drop.
- **Container**: For organizing file tabs within layouts.

## Common use cases

### Editor tabs

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

function EditorTabs() {
const [selectedIndex, setSelectedIndex] = useState(0)
return (
  <FileTabs
    selectedIndex={selectedIndex}
    onSelect={setSelectedIndex}
    onClose={() => {}}
    onReorderTab={() => {}}
  >
    <FileTabs.Tab index={0} text='Component.tsx' icon='code-in-square' />
    <FileTabs.Tab index={1} text='Styles.css' icon='code-in-square' />
  </FileTabs>
)
}
```

### With status indicators

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

function StatusTabs() {
const [selectedIndex, setSelectedIndex] = useState(0)
return (
  <FileTabs
    selectedIndex={selectedIndex}
    onSelect={setSelectedIndex}
    onClose={() => {}}
    onReorderTab={() => {}}
  >
    <FileTabs.Tab index={0} text='File1.tsx' status='default' />
    <FileTabs.Tab index={1} text='File2.tsx' status='success' />
  </FileTabs>
)
}
```

### Preview mode