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.

Demo

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.

Demo

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

required

fill

boolean

default:"false"

Whether the tabs should fill the available width.

<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

Common Examples

Basic Tabs

Notes

Changing the Default Tab

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

​React Accessibility

​Tab Props

​Tab.List Props

​Tab.Button Props

​Tab.Panel Props

Common Examples

Basic Tabs

Notes

Changing the Default Tab

React Accessibility

`Tab` Props

`Tab.List` Props

`Tab.Button` Props

`Tab.Panel` Props