# Tabs

```ts
import { Tab } from 'cx/widgets';
```



Tabs are used to switch between different views or content sections. Each `Tab` component writes its `tab` value to the shared `value` binding when clicked.

```tsx
import { createModel } from "cx/data";
import { Tab } from "cx/widgets";

interface PageModel {
  tab: string;
}

const m = createModel<PageModel>();

export default (
  <div className="flex flex-col items-start gap-4">
    <div>
      <Tab tab="tab1" value={m.tab} default>
        Tab 1
      </Tab>
      <Tab tab="tab2" value={m.tab}>
        Tab 2
      </Tab>
      <Tab tab="tab3" value={m.tab}>
        Tab 3
      </Tab>
      <Tab tab="tab4" value={m.tab} disabled>
        Disabled
      </Tab>
    </div>
    <div>
      <Tab tab="tab1" value={m.tab} mod="line">
        Tab 1
      </Tab>
      <Tab tab="tab2" value={m.tab} mod="line">
        Tab 2
      </Tab>
      <Tab tab="tab3" value={m.tab} mod="line">
        Tab 3
      </Tab>
      <Tab tab="tab4" value={m.tab} mod="line" disabled>
        Disabled
      </Tab>
    </div>
    <div>
      <div className="pl-2">
        <Tab tab="tab1" value={m.tab} mod="classic">
          Tab 1
        </Tab>
        <Tab tab="tab2" value={m.tab} mod="classic">
          Tab 2
        </Tab>
        <Tab tab="tab3" value={m.tab} mod="classic">
          Tab 3
        </Tab>
        <Tab tab="tab4" value={m.tab} mod="classic" disabled>
          Disabled
        </Tab>
      </div>
      <div className="border cxm-cover p-4" text={m.tab} />
    </div>
  </div>
);

```

## Tab Content

Use the `visible` property with the `equal` helper to show content based on the selected tab:

```tsx
import { createModel } from "cx/data";
import { equal } from "cx/ui";
import { Tab } from "cx/widgets";

interface PageModel {
  tab: string;
}

const m = createModel<PageModel>();

export default (
  <div>
    <div className="pl-2">
      <Tab tab="tab1" value={m.tab} mod="classic" default>
        Profile
      </Tab>
      <Tab tab="tab2" value={m.tab} mod="classic">
        Settings
      </Tab>
      <Tab tab="tab3" value={m.tab} mod="classic">
        Notifications
      </Tab>
    </div>
    <div className="border cxm-cover p-4">
      <div visible={equal(m.tab, "tab1")}>Profile content goes here.</div>
      <div visible={equal(m.tab, "tab2")}>Settings content goes here.</div>
      <div visible={equal(m.tab, "tab3")}>Notifications content goes here.</div>
    </div>
  </div>
);

```

## Configuration

| Property | Type | Description |
| -------- | ---- | ----------- |
| `tab` | `string \| number` | Value to write to `value` when the tab is clicked. |
| `value` | `string \| number` | Binding to the currently selected tab. Tab appears active when `value` equals `tab`. |
| `mod` | `string` | Visual modifier. Common values: `line`, `classic`. |
| `default` | `boolean` | Set to `true` to make this the default tab. |
| `disabled` | `boolean` | Set to `true` to disable the tab. |
| `focusOnMouseDown` | `boolean` | If `true`, tab receives focus on mouse click. Default is `false`. |
| `baseClass` | `string` | Base CSS class. Default is `tab`. |
| `className` | `string` | Additional CSS class to apply. |
| `style` | `string \| object` | Additional styles to apply. |