Tabs

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.

 <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} 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" 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" disabled>
        Disabled
      </Tab>
    </div>
    <div className="border border-border bg-white p-4" text={m.tab} />
  </div>
</div> 
 interface PageModel {
  tab: string;
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { Tab } from "cx/widgets"; 

Tab 1 Tab 2 Disabled

tab1

Tab Content

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

 <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 border-gray-300 bg-white 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> 
 interface PageModel {
  tab: string;
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { equal } from "cx/ui";
import { Tab } from "cx/widgets"; 

Profile Settings Notifications

Profile content goes here.

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.