Tab – Code

Implementation
Tab Props
Tab.List Props
Tab.Button Props
Tab.Panel Props

Common Examples

import { Tab } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Tab>
      <Tab.List>
        <Tab.Button id="t-1" controls="p-1">
          Tab 1
        </Tab.Button>
        <Tab.Button id="t-2" controls="p-2">
          Tab 2
        </Tab.Button>
      </Tab.List>
      <Tab.Panel id="p-1">Tab 1 content...</Tab.Panel>
      <Tab.Panel id="p-2">Tab 2 content...</Tab.Panel>
    </Tab>
  );
}

Basic Tabs

Tabs are used to separate large blocks of content relevant to the user’s current context. Four components are used to makeup Anvil tabs: Tab, Tab.List, Tab.Button, and Tab.Panel.

Notes

There should always be an equal number of Tab.Button and Tab.Panel components.
Values in the controls prop of each Tab.Button component should match the id of the corresponding Tab.Panel.

Changing the Default Tab

By default, the content of the Tab.Panel associated to the first Tab.Button will be displayed. To change this behavior, supply the index of the Tab.Button that should be displayed first to the defaultIndex of the parent Tab.

Controlled Tabs

To control the active tab from outside the component, use the index and onIndexChange props. This is useful when you need to synchronize the active tab with external state, such as a URL parameter or another UI element.

When using index, you must also provide onIndexChange to keep the active tab in sync when the user interacts with it directly. Without onIndexChange, the tab will appear frozen.

React Accessibility

An Anvil Tab.Button cannot be disabled.
When a Tab.Button has focus, the left and right arrow keys and enter can be used to navigate tabs.

For more guidance on custom tab behaviors and keyboard interaction, see changing content best practices.

<Tab defaultIndex={0}>
  <Tab.List>
    <Tab.Button id="t-1" controls="p-1">
      Tab 1
    </Tab.Button>
  </Tab.List>
  <Tab.Panel id="p-1">Content</Tab.Panel>
</Tab>

`Tab` Props

defaultIndex

number

default:"0"

The index of the tab that should be active by default. Use for uncontrolled usage. For controlled usage, use index instead.

fill

boolean

default:"false"

Whether the tabs should fill the available width.

index

number

The index of the currently active tab. Use for controlled usage. For uncontrolled usage, use defaultIndex instead.

onIndexChange

(index: number) => void

Callback fired when the active tab changes. Use with index for controlled usage.

<Tab.List>
  <Tab.Button id="t-1" controls="p-1">
    Tab 1
  </Tab.Button>
</Tab.List>

`Tab.List` Props

The Tab.List component accepts any valid HTML div props, and does not have any custom props.

<Tab.Button
  id="t-1"
  controls="p-1"
  onClick={(e, index) => console.log("Clicked", index)}
>
  Tab 1
</Tab.Button>

`Tab.Button` Props

The Tab.Button component accepts any valid HTML button props, other than disabled, as well as the following:

controls

string

required

id of the Tab.Panel that this button controls.

string

required

Unique identifier for the tab button.

onClick

(e: MouseEvent, index?: number) => void

<Tab.Panel id="p-1">Tab content</Tab.Panel>

`Tab.Panel` Props

The Tab.Panel component accepts any valid HTML div props in addition to what is listed below.

string

required

Unique identifier for the tab panel. Used by the controls prop of the Tab.Button component to determine when to show this panel.

Anvil2 Web

Resources

Tab – Code

Common Examples

Basic Tabs

Notes

Changing the Default Tab

Controlled Tabs

React Accessibility

`Tab` Props

`Tab.List` Props

`Tab.Button` Props

`Tab.Panel` Props

Anvil2 Web

Resources

​Common Examples

​Basic Tabs

​Notes

​Changing the Default Tab

​Controlled Tabs

​React Accessibility

​Tab Props

​Tab.List Props

​Tab.Button Props

​Tab.Panel Props

Common Examples

Basic Tabs

Notes

Changing the Default Tab

Controlled Tabs

React Accessibility

`Tab` Props

`Tab.List` Props

`Tab.Button` Props

`Tab.Panel` Props