> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Tabs
> Switch between related panels with accessible tab navigation.
`Tabs` connects each tab to a panel using a shared `value`. Keep the values unique within a root.
## Tab panels
```tsx theme={null}
import { Tabs } from 'twenty-ui/navigation';
export const RecordTabs = () => (
Overview
Activity
Company and contact details.Recent calls and emails.
);
```
`Tabs.Tab` accepts `startIcon`, `badge`, and a `size` of `sm` or `md` (default `sm`). The active indicator is included in `Tabs.List`.
## Controlled state and manual activation
```tsx theme={null}
import { useState } from 'react';
import { Tabs } from 'twenty-ui/navigation';
export const SettingsTabs = () => {
const [tab, setTab] = useState('profile');
return (
ProfileNotifications
Billing
Profile settings.Notification settings.
);
};
```
With `activateOnFocus={false}`, arrow keys move focus and Enter or Space activates the focused tab. `loopFocus` defaults to `true`. Disabled tabs are skipped. Use `orientation="vertical"` on `Root` for vertical navigation.
## Parts
| Part | Purpose |
| ------- | ---------------------------------------------------------- |
| `Root` | Owns the active value and orientation. |
| `List` | Labels and groups the tabs; includes the active indicator. |
| `Tab` | Selects its matching panel. |
| `Panel` | Displays content for one value. |
Use `keepMounted` on a panel when its contents must remain mounted while inactive. Give the list an accessible name that describes the set of panels.
## Props
The reference is generated from the public component types. Native attributes, including accessible names and event handlers, are also accepted on parts that render elements.
### Tabs.Root
CSS class applied to the element, or a function that
returns a class based on the component's state.
The default value. Use when the component is not controlled.
When the value is `null`, no Tab will be active.
Callback invoked when new value is being set.
The event `reason` is `'none'` for user-initiated changes, such as a click
or keyboard navigation; `'initial'` for the first automatic selection or
fallback in uncontrolled roots when `defaultValue` is omitted or
`undefined`, including when the implicit initial value is disabled or
missing; `'disabled'` for automatic fallback when the selected tab becomes
disabled in uncontrolled roots; or `'missing'` for automatic fallback when
the selected tab is removed, or when an explicit `defaultValue` never
matches a mounted tab in uncontrolled roots.
For automatic changes, the selected value can be `null` when no enabled Tab
is available as a fallback.
Automatic changes cannot be canceled; calling `eventDetails.cancel()` for
`'initial'`, `'disabled'`, or `'missing'` has no effect.
The component orientation (layout flow direction).
Allows you to replace the component's HTML element
with a different tag, or compose it with another component.
Accepts a `ReactElement` or a function that returns the element to render.
Style applied to the element, or a function that
returns a style object based on the component's state.
The value of the currently active `Tab`. Use when the component is controlled.
When the value is `null`, no Tab will be active.
### Tabs.List
Whether to automatically change the active tab on arrow key focus.
Otherwise, tabs will be activated using \Enter\ or \Space\ key press.
CSS class applied to the element, or a function that
returns a class based on the component's state.
Whether to loop keyboard focus back to the first item
when the end of the list is reached while using the arrow keys.
Allows you to replace the component's HTML element
with a different tag, or compose it with another component.
Accepts a `ReactElement` or a function that returns the element to render.
Style applied to the element, or a function that
returns a style object based on the component's state.
### Tabs.Tab
Content rendered after the label, such as a count.
CSS class applied to the element, or a function that
returns a class based on the component's state.
Whether the Tab is disabled.
If a first Tab on a `` is disabled, it won't initially be selected.
Instead, the next enabled Tab will be selected.
However, it does not work like this during server-side rendering, as it is not known
during pre-rendering which Tabs are disabled.
To work around it, ensure that `defaultValue` or `value` on `` is set to an enabled Tab's value.
Whether the component renders a native `