;
}
};
```tsx lines expandable theme={null}
import { Tab } from "@servicetitan/anvil2";
function App() {
return (
Invoices
Payments
Vendor Bills
Invoices Content...Payments Content...Vendor Bills Content...
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { Tab } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
Tab 1
Tab 2
Tab 1 content...Tab 2 content...
);
}
```
### 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`.
```tsx lines expandable theme={null}
import { Tab } from "@servicetitan/anvil2";
function App() {
return (
First
Second
Third
Content 1Content 2Content 3
);
}
export default App;
```
#### 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`.
```tsx lines expandable theme={null}
import { Tab } from "@servicetitan/anvil2";
function App() {
return (
First
Second
Content 1Content 2
);
}
export default App;
```
### 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.
```tsx lines expandable theme={null}
import { useState } from "react";
import { Tab, Button, Flex } from "@servicetitan/anvil2";
function App() {
const [activeIndex, setActiveIndex] = useState(0);
return (
Invoices
Payments
Vendor Bills
Invoices Content...Payments Content...Vendor Bills Content...
);
}
export default App;
```
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](/docs/accessibility/changing-content).
```tsx theme={null}
Tab 1
Content
```
## `Tab` Props
The index of the tab that should be active by default. Use for uncontrolled usage. For controlled usage, use `index` instead.
Whether the tabs should fill the available width.
The index of the currently active tab. Use for controlled usage. For uncontrolled usage, use `defaultIndex` instead.
Callback fired when the active tab changes. Use with `index` for controlled usage.
```tsx theme={null}
Tab 1
```
## `Tab.List` Props
The `Tab.List` component accepts any valid HTML `div` props, and does not have any custom props.
```tsx theme={null}
console.log("Clicked", index)}
>
Tab 1
```
## `Tab.Button` Props
The `Tab.Button` component accepts any valid HTML `button` props, other than `disabled`, as well as the following:
`id` of the `Tab.Panel` that this button controls.
Unique identifier for the tab button.
```tsx theme={null}
Tab content
```
## `Tab.Panel` Props
The `Tab.Panel` component accepts any valid HTML `div` props in addition to what is listed below.
Unique identifier for the tab panel. Used by the `controls` prop of the `Tab.Button` component to determine when to show this panel.
