# Tabs

Switch between two to six panes of related content that share one place on the screen.

* Kind: component
* Page: https://design.werklist.com/components/tabs
* Version: 2.1.2

## When to use it

* The parts of one record, such as the profile, documents and interviews of a candidate.
* Lists inside one surface, such as All and Unread in a notifications tray.

## When not to use it

* Going to another page: use a link or navigation.
* Showing the same data another way (table, board, chart): use a segmented control.
* Running a command such as Send offer: use a button.
* Steps in a fixed order: use a form.
* More than six panes.

## Rules

* Two to six tabs.
* Tabs never wrap or scroll sideways. Shorten the labels, and below 640 px replace the row with a select.
* A pane keeps its state while hidden, so a half written note survives a switch.
* Icons on every tab or on none.

## Anatomy

* Tab list: a horizontal row with a name, 4 px between tabs (--space-1)
* Label: 13 px on 20 px, weight 500. A chosen line tab turns bold inside the width it always keeps
* Line tab: 34 px high, 8 px at each side. On a touch screen at least 44 by 44 px, 16 px at each side (--space-2)
* Line: 2 px high, brand blue, 4 px in from the edges of the tab, rounded ends, on a 1 px rule under the whole row (--brand-blue, --border-rule, --radius-full)
* Filled tab: 36 px high, 44 px on a touch screen, 12 px at each side, radius 8 px. The chosen tab sits on the control fill (--surface-control, --radius-lg, --space-3)
* Icon: 16 px, 8 px before the label, on every tab or on none
* Count: a Counter 8 px after the label, in tabular digits, shown only above zero
* Panel: the pane of a tab, reachable with Tab when it holds nothing that takes focus
* Phone select: below 640 px, for a row that does not fit: 44 px, 16 px chevron, on the field fill of WerkOS. In light a faint ink wash with no edge, in dark a faint fill with a 1 px inset ring (--glass-fill-input, --input-border)

## Variants

* Line: Inside a tray or a raised panel.
* Filled: On a full screen or in a toolbar.

## States

* Rest: Muted ink (--text-muted)
* Hover: Full ink, no fill (--text)
* Chosen, line: Full ink, weight 700, the blue line under it, aria-selected true (--text, --brand-blue)
* Chosen, filled: Full ink on the control fill, weight kept, aria-selected true (--text, --surface-control)
* Pressed, filled: Scales to 0.98, or holds still with reduced motion
* Focus: 2 px ring, 2 px offset (--focus-ring)
* Line motion: Slides to the new tab in 200 ms, or moves at once with reduced motion (--duration-base, --ease-standard)
* Forced colors: The line is drawn in the system text color, and a chosen filled tab keeps a 1 px outline

## Keyboard

* Tab: Enters the row at the chosen tab. The next Tab moves into the pane
* ArrowLeft, ArrowRight: Previous or next tab. Chooses it at once when the pane shows at once
* Home, End: First or last tab
* Enter, Space: Chooses the focused tab when a pane has to load

## Accessibility

* The row is a tablist with a name.
* Each tab: role tab, aria-selected, aria-controls its pane. Only the chosen tab is in the tab order.
* Each pane: role tabpanel, labelled by its tab.
* No tab is disabled. An empty pane says why it is empty.
* Rest ink meets 4.5 to 1 in both themes.
* A count is read as part of the name of its tab.

## Content

* Nouns or short noun phrases in sentence case, parallel, without end punctuation: Profile, Documents, Interviews.
* One or two words each. Give a shorter phone label when a row does not fit at 360 px.
* Counts only above zero.

## Tokens

* --space-1
* --space-2
* --space-3
* --text
* --text-muted
* --brand-blue
* --border-rule
* --surface-control
* --radius-lg
* --radius-full
* --glass-fill-input
* --input-border
* --focus-ring
* --duration-base
* --ease-standard