Tabs
Tabs switch between peer views of one object without leaving the page: overview, activity, members, all describing the same record, one visible at a time. The test for whether a control is really tabs is what it leaves alone. If pressing it changes the address, the page title, or what the primary action does, it is navigation wearing a tab's clothes, and the reader will expect the back button to undo it.
Scale is where this pattern gets misused. Size belongs to the surface rather than to the taste of whoever is assembling it: a control across a page, a control inside a panel and a control inside a field are three densities, and two of them side by side stop reading as one system. Count is the second trap. Past a handful of views the row must wrap or crush its labels, and moving the list into a dropdown costs nothing, because nobody was comparing the sixth view with the first.
Grouped tabs
Best for
Page-level view switching: 2 to 5 peer views of one object, switched in place
Anatomy
Five fixed scales, Lg to Xxs · pill and raised as switches on the same geometry · one scale per surface · the track wraps rather than scrolls
Tabs in place
Best for
The test the page leads with: a control that re-renders one region and leaves the page alone
Anatomy
Heading and meta that never move · Sm tabs under them · one panel swapped beneath · no URL, title or primary action changes
Orvain UI
Updated 2 hours agoSegmented control
Best for
Two or three short options that shape one field or a dense toolbar
Anatomy
Field header with description and optional tag · 40px track, active cell on white · icon, label or both · footer hint
Two or three short options that shape one field or a dense toolbar. Past three, or once a label is long enough to truncate, the answer is a dropdown.
Using Tabs
Reach for it when
- Two to five peer views of one object, switched in place with no change of address.
- A panel whose heading, meta and primary action must hold still while the content beneath them changes.
- A field with two or three short options that shape what it shows: a segmented control rather than full tabs.
- A dense toolbar where the options are short enough to sit side by side without truncating.
Reach for something else when
- Views that have to be completed in order: a stepper announces the sequence, where tabs promise peers you can visit in any order.
- Content people need to compare, print or search across: stacked sections with headings keep all of it findable, while tabs hide every panel but one, including from in-page search.
- Anything that changes the address or what the primary action does. That is navigation, and it belongs in a nav or a tab menu.
Where it shows up
Record detail panels
A person, an order or a project with more facets than fit on one screen. The heading, the meta and the primary action hold still while the panel underneath swaps, so the reader never loses the record they are on.
Product page sections
Description, specification and reviews for one item. Each is a peer view of the same thing, and splitting them keeps the page from becoming a scroll whose end nobody reaches.
View mode picker
List, board or timeline over one data set. Two or three short labels in a dense toolbar suit a segmented control, because the choice shapes how the view is drawn rather than replacing what is on the page.
Field-level options
A field whose answer is one of a few short choices: a default view, a unit, a billing period. The control carries the field's own header, required mark and hint, so it validates like every other field.
Questions
What is the difference between tabs and a segmented control?
Scope and size. Tabs switch between whole views of one object, usually sitting at the top of a page or panel with a region beneath that re-renders. A segmented control is compact, holds two or three short options, and shapes something narrower: a field's value, or what a toolbar is currently showing. If it needs a field label, a required mark and a hint, it is a segmented control.
What keyboard behaviour do tabs need?
One stop in the tab order for the entire set, not one per tab. Arrow keys move between tabs, Home and End jump to either end, and the tab key moves out of the set and into the panel. Each tab reports whether it is selected, and the panel is associated with the tab that opened it so a screen reader can move between the two.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPTabs
Tabs switch between peer views of one object without leaving the page: overview, activity, members, all describing the same record, one visible at a time. The test for whether a control is really tabs is what it leaves alone. If pressing it changes the address, the page title, or what the primary action does, it is navigation wearing a tab's clothes, and the reader will expect the back button to undo it.
Scale is where this pattern gets misused. Size belongs to the surface rather than to the taste of whoever is assembling it: a control across a page, a control inside a panel and a control inside a field are three densities, and two of them side by side stop reading as one system. Count is the second trap. Past a handful of views the row must wrap or crush its labels, and moving the list into a dropdown costs nothing, because nobody was comparing the sixth view with the first.
Grouped tabs
Best for
Page-level view switching: 2 to 5 peer views of one object, switched in place
Anatomy
Five fixed scales, Lg to Xxs · pill and raised as switches on the same geometry · one scale per surface · the track wraps rather than scrolls
Tabs in place
Best for
The test the page leads with: a control that re-renders one region and leaves the page alone
Anatomy
Heading and meta that never move · Sm tabs under them · one panel swapped beneath · no URL, title or primary action changes
Orvain UI
Updated 2 hours agoSegmented control
Best for
Two or three short options that shape one field or a dense toolbar
Anatomy
Field header with description and optional tag · 40px track, active cell on white · icon, label or both · footer hint
Two or three short options that shape one field or a dense toolbar. Past three, or once a label is long enough to truncate, the answer is a dropdown.
Using Tabs
Reach for it when
- Two to five peer views of one object, switched in place with no change of address.
- A panel whose heading, meta and primary action must hold still while the content beneath them changes.
- A field with two or three short options that shape what it shows: a segmented control rather than full tabs.
- A dense toolbar where the options are short enough to sit side by side without truncating.
Reach for something else when
- Views that have to be completed in order: a stepper announces the sequence, where tabs promise peers you can visit in any order.
- Content people need to compare, print or search across: stacked sections with headings keep all of it findable, while tabs hide every panel but one, including from in-page search.
- Anything that changes the address or what the primary action does. That is navigation, and it belongs in a nav or a tab menu.
Where it shows up
Record detail panels
A person, an order or a project with more facets than fit on one screen. The heading, the meta and the primary action hold still while the panel underneath swaps, so the reader never loses the record they are on.
Product page sections
Description, specification and reviews for one item. Each is a peer view of the same thing, and splitting them keeps the page from becoming a scroll whose end nobody reaches.
View mode picker
List, board or timeline over one data set. Two or three short labels in a dense toolbar suit a segmented control, because the choice shapes how the view is drawn rather than replacing what is on the page.
Field-level options
A field whose answer is one of a few short choices: a default view, a unit, a billing period. The control carries the field's own header, required mark and hint, so it validates like every other field.
Questions
What is the difference between tabs and a segmented control?
Scope and size. Tabs switch between whole views of one object, usually sitting at the top of a page or panel with a region beneath that re-renders. A segmented control is compact, holds two or three short options, and shapes something narrower: a field's value, or what a toolbar is currently showing. If it needs a field label, a required mark and a hint, it is a segmented control.
What keyboard behaviour do tabs need?
One stop in the tab order for the entire set, not one per tab. Arrow keys move between tabs, Home and End jump to either end, and the tab key moves out of the set and into the panel. Each tab reports whether it is selected, and the panel is associated with the tab that opened it so a screen reader can move between the two.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
