# Tabs

Tabs are used to alternate amongst related views within the same context.

## Design & usage guidelines

Use Tabs when you need to group related sub-groups of content and the user only
needs to access one sub-group at a time.

Do not use Tabs as a means of navigating the view or in lieu of a Table of
Contents.

## Content guidelines

Tabs are a metaphor for physical tab folders, so think of the content of each
Tab as its' own "sheet of paper". What the content is can be flexible, as long
as each Tab has distinct content.

Tab labels contain only text by default, but additional content can be added if
needed. Typically this should be some metadata that helps the user understand or
anticipate the contents of each Tab, such as an InlineLabel to badge a count of
items in each Tab, or an Icon. Do not insert additional interactive elements
such as Buttons into a Tab label as it will create a confusing interaction
pattern for the user.

## Related components

To show multiple groupings of content at once, use [Card](../Card/Card.md).

To allow the user to select one-of-many options in a form, use
[RadioGroup](../RadioGroup/RadioGroup.md) or
[LegacySelect](../LegacySelect/LegacySelect.md).

## Accessibility

Tabs have known accessibility concerns, including:

* the user cannot navigate between Tabs using the arrow keys
  * this breaks a universal expectation for tabbed interfaces
* the user cannot keyboard-navigate directly from the selected Tab into the
  selected Tab content
  * initial keypress of `tab` key or `command+option+right` focuses next Tab


## Developer notes

We discussed the possibility of sharing arrow key navigation logic between the
SegmentedControl and FilterPicker components due to their similarities. However,
the SegmentedControl does not have specific arrow key logic because arrow key
navigation is implicitly set through the SegmentedControl radio button
structure. The options are a type of `radio` and part of a group (`name`
attribute) which inherently supports keyboard navigation.

There is another instance where similar logic is used within the
`useInternalChipDismissible` hook. In the future, we will want to consider
refactoring this logic into a shared hook or utility function to reduce
duplication and improve maintainability.


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `activeTab` | `number` | No | — | Specifies the index of the active tab. If provided, the component will be controlled and the active tab will be deter... |
| `defaultTab` | `number` | No | `0` | Specifies the index of the tab that should be active on mount |
| `onTabChange` | `(newTabIndex: number) => void` | No | — | Callback that fires when the active tab changes @param newTabIndex |