# Tabs
_Box Kite 2.1.0 · a markdown copy of https://www.box-kite.dev/tabs/_
The APG tabs pattern: one list of tabs over one panel at a time, with selection following focus and the arrows following the reading order.
**Import**
```jsx
import Tabs from '@box-kite/react/components/tabs';
```
**Usage**
```jsx
OverviewActivitySettingsWho is on it, and what is left.What changed this week.Who is allowed to change it.
```
## Selection follows focus
One arrow key moves to a tab _and_ shows its panel, which is APG's default and what a reader expects. The three things the pattern asks of the keyboard are all here:
One tab stop for the whole list
Tab enters the list once, landing on the selected tab, and again leaves it for the panel — the roving tabindex, so a twelve-tab list is not twelve stops on the way down the page.
The arrows follow the reading order
Right and Left in a horizontal list, Down and Up in a vertical one, wrapping at the ends and stepping over a disabled tab. In a right-to-left page ArrowLeft is the _next_ tab. The off-axis pair is left to the page, so a horizontal list does not eat a scroll.
Manual activation, when a panel is expensive
`activation="manual"` splits focus from selection: the arrows move, and Enter or Space chooses. Nothing renders on the way past.
## Manual activation
Arrow across these and nothing happens until Enter or Space — worth it when a panel fetches or renders something heavy, and wrong otherwise, since it costs the reader a keystroke per tab.
```jsx
DailyWeeklyYearlyToday, hour by hour.This week, day by day.Twelve months of it.
```
## Vertical
`orientation="vertical"` turns the widget's axis, moves the arrows to Down and Up, and puts the indicator on the inline end — where it mirrors in a right-to-left page, which a border on the right would not.
```jsx
GeneralMembersBillingName, description, visibility.Who is in, and what they may do.The plan and the invoices.
```
## An indicator that travels
`indicator="sliding"` replaces the border each tab draws with one element for the whole list, which animates between tabs because it _is_ the same element. Where it goes is measured, so it appears once the widget has run — and until then the tabs keep drawing their own, which is what a prerendered page paints and what a reader whose JavaScript never arrives keeps. The travel rides `--transitionTime`, so `prefers-reduced-motion` stops it with no opt-out.
```jsx
OverviewActivityMembers and permissionsLogsWho is on it, and what is left.What changed this week.Who is allowed in, and to do what.Every build, newest first.
```
It turns with the list: a vertical one puts the bar on the inline end, which is the right-hand side of a left-to-right page and the left of a right-to-left one.
```jsx
OverviewActivityLogsWho is on it.What changed.Every build.
```
## Panels that resize smoothly
Panels of different heights make the page jump under them. Wrap them in a `Tabs.Panels` and that container takes the height of the panel on screen, so the change is a transition instead. It is the only optional part — panels work as plain siblings of the list without it.
```jsx
SummaryChangelogOne line, and the box is one line tall.The container measures whichever panel is showing.It clips only while the height is travelling.At rest nothing is clipped, so a focus ring at the edge survives.And the wait is the CSS on the element, so reduced motion has none.
```
It measures the panel, never itself
The container writes its own height, so watching that height would be the loop. What it watches is the panel — every reflow of it, not only a switch — which is how a wrapped line or a late font moves the box with it.
Clipped only while it is moving
A panel already at its full height inside a container still on the way there has to be clipped, or it paints over whatever follows. At rest the clip is gone, because the container is exactly as tall as its panel and a permanent one would cut the focus ring off everything sitting at that edge.
## Disabled tabs
A disabled tab is not selectable and the arrows step over it — the opposite of `Menu.Item`, which APG asks stay reachable. Selection follows focus here, so a tab focus could reach and selection could not would leave the widget with no state to be in.
```jsx
OverviewAudit logActivityWho is on it.What changed.
```
## Only the selected panel is rendered
An unmounted panel costs nothing and gets an entrance for free, since `startingStyle` runs on the mount — but it also loses whatever state it held. `keepMounted` renders them all and hides the rest, which is what a panel holding a half-filled form wants. Type into the first field, switch away and back:
```jsx
DetailsAccess
```
A hidden panel carries the `hidden` attribute _and_ a `display: none` rule of its own, because every Box carries `display: block` and any author rule outranks the UA's `[hidden]` one.
## Controlled
Pass `value` and the consumer owns the selection; `onValueChange` reports the new tab and why it changed — `'click'` or `'keyboard'`. The tab sequence follows the selection either way, so a value changed from somewhere else on the page moves the keyboard's entry point with it.
```jsx
const [value, setValue] = useState('activity');
{ if (next) setValue(next); log(reason); }}>
…
```
## A tab is wherever you wrote it
The tabs are read off the DOM rather than out of a registry, so a tab a consumer wrapped in a layout of their own, rendered from a list, or put behind a condition is in the order it was written and navigates like any other — and a nested set of tabs belongs to its own list, not the one around it.
```jsx
{views.map((view: { id: string; name: string }) => (
{view.name}
))}
```
## Styling
Every part is a Box, so every prop is available, and the defaults live in `Box.components('tabs')` — with `tabs.list`, `tabs.tab` and `tabs.panel` beneath it. The selected state is `aria-selected`, so `ariaAttr={{ selected: … }}` is what styles it on a tab — inside a style tree the same state is the bare `selected` key, but as a _prop_ `selected` writes the attribute the component owns. The indicator is a border rather than a background, because a forced-colors mode throws every background away and selection would otherwise read identically on and off.
```jsx
Overview
```
## Tabs props
Everything below is this component’s own. All 235 of Box’s style props work on it too, and those are on [/box](https://www.box-kite.dev/box.md) rather than repeated here.
| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `children` | `React.ReactNode` | — | The tabs and their panels: a `Tabs.List` of `Tabs.Tab`, then one `Tabs.Panel` per tab. |
| `value` | `string` | — | Controlled selection. Leave it out and the widget owns it. |
| `defaultValue` | `string` | — | Which tab starts selected. Left out, nothing is selected and no panel is shown until one is chosen. |
| `onValueChange` | `ChangeHandler` | — | Fires with the newly selected tab and why it changed — `'click'` or `'keyboard'`. |
| `orientation` | `TabsOrientation` | `'horizontal'` | Which way the tabs run. Horizontal is the reading axis, so its arrows mirror in a right-to-left page. |
| `activation` | `TabsActivation` | `'automatic'` | Whether moving to a tab selects it. Default `'automatic'`, which is what APG asks for. |
| `loop` | `boolean` | `true` | Whether the arrows wrap around at the ends. Default `true`. |
| `indicator` | `TabsIndicator` | `'static'` | Which indicator marks the selected tab: the tab's own border (`'static'`, the default) or one element travelling between them (`'sliding'`), which animates because it is the same element. |
| `keepMounted` | `boolean` | `false` | Render every panel rather than only the selected one, hiding the rest. What a panel holding a half-filled form needs, since an unmounted panel loses its state. |
### Tabs.List
The tabs themselves, and the keyboard: it sits on the list because roving tabindex puts one tab in the tab sequence.
| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `children` | `React.ReactNode` | — | The tabs. |
| `label` | `string` | — | The list's accessible name. A tablist has none of its own, and one page can hold several. |
| `labelledBy` | `string` | — | Names the list after an element already on the page, instead of `label`. |
### Tabs.Tab
One tab: a real `