Tabs, accordions, and steppers: pick the right one

Tabs, accordions, and steppers all show fewer things than you have. They look like cousins on the page, three rows of compact options that hide content behind a single trigger, but they're not interchangeable. Picking the wrong one is the design version of using a hammer to drive a screw. It mostly works. It always looks wrong.

Here's a field guide to telling them apart and a short list of the rules that make each one feel calm.

The three jobs, side by side

• Tabs: mutually exclusive views of the same object. The user picks one at a time and order doesn't matter. Use for: Overview / Activity / Settings on a project page.
• Accordions: independently expandable sections of different content. The user can open one, several, or none. Use for: FAQs, settings groups, optional details on a card.
• Steppers: sequential progress through a task with a beginning and an end. The user moves through them in order. Use for: signup wizards, checkout, multi-step forms.

Tabs: when they earn the slot

Tabs work when you have 3–6 facets of the same object, all roughly equal in weight, and the user wants to flip between them. GitHub repo pages, Vercel project pages, Stripe customer pages, all canonical tab implementations.

Rules that make tabs feel right

• Active state has to be unambiguous. A weight change isn't enough. Use an underline, a filled background, or a strong color shift. Users need to know where they are at a glance.
• Tab labels are nouns, not verbs. "Overview" not "View overview." "Settings" not "Configure."
• Order matters when it matters. Put the most-used tab first. Sort by usage if you have analytics; sort by importance if you don't.
• Don't ship more than 6 tabs. Past six, scan time exceeds the time it would have taken to navigate via a sidebar. Move to a sidebar or sub-routes.
• Mirror tabs in the URL. Tab state should be in the path or query string, otherwise back-button and link-sharing both break.

Accordions: when they earn the slot

Accordions work when content is genuinely optional and the user is browsing rather than completing a task. FAQ sections, settings groups, advanced options inside a form. They fail when the content inside is required, every accordion in a wizard is a step the user might skip and a bug they might miss.

Rules that make accordions feel right

• Allow multiple open at once, unless there's a strong reason for exclusivity. The single-open accordion (open A and B auto-closes) is annoying when users want to compare.
• Animate the expansion in under 200ms. Long expansion animations feel like the UI is buffering.
• The chevron rotates, the text doesn't move. Subtle motion in the trigger; no jarring layout shift in the header itself.
• Group, don't flatten. Accordions that nest 3 levels deep are a folder tree in disguise. If you need that, ship a tree view.
• Open the first one by default when the content is the main reason for the page (FAQ pages, help docs). Closed by default when accordions are auxiliary to other content.

Steppers: when they earn the slot

Steppers work when a task has a clear start, a clear end, and a meaningful sequence. Signup with progressive profile capture, multi-page checkout, an onboarding wizard, an export flow with confirmations. They fail when the steps don't depend on each other, at that point, a tabbed form on one screen is faster.

Rules that make steppers feel right

• Show the count. "Step 2 of 4" beats a featureless progress bar. Users need to know how much pain remains.
• Let users go back, never forward by skipping. Backwards is safety. Forwards by skipping is a footgun, the user lands in a step assuming earlier ones are complete.
• Persist state between steps. If a user closes the tab at step 3, returning should drop them at step 3 with their inputs intact. Without this, drop-off is brutal.
• Make the last step a confirmation, not a surprise. "Review and submit" is one extra screen and prevents most of the support tickets that wizards generate.
• Don't combine a stepper with a sidebar nav. Two ways to move through the same flow doubles the cognitive load. Pick one.

The wrong-tool mistakes

1. 01Tabs for sequential content. "Step 1 / Step 2 / Step 3" as tab labels means you needed a stepper. The visual freedom of tabs (jump anywhere) sabotages the sequential UX (we promise this gets easier).
2. 02Accordions inside a form that must all be filled. Every collapsed section is a chance for the user to miss a required field. Either ship a stepper or show all fields with section headers.
3. 03Steppers for optional configuration. If a user can skip step 4, they shouldn't see step 4. Hide it behind an "Advanced" toggle instead.
4. 04Tabs that hide form errors. A submit on tab 1 that throws a validation error on tab 3 (unreachable from the current view) is a bug, every time. Either inline the errors with anchors or collapse the tabs into one page.

Frequently asked

When should I use tabs vs a sidebar?

Tabs for 3–6 facets of the same object. Sidebar for navigation between different objects. If your tabs are getting renamed to feel like top-level navigation ("Dashboard," "Customers," "Settings"), you outgrew tabs three feature releases ago.

Are accordions bad for SEO?

No, modern crawlers see the content inside collapsed accordions as long as it's in the DOM (which it should be). The only SEO penalty is for content hidden via JavaScript that isn't in the initial HTML, which is a server-rendering problem, not an accordion problem.

Should a stepper show all steps up front?

Yes, visible in the header. Knowing there are four steps and you're on step two reduces drop-off compared to a featureless 'Next' button. Even seeing 'Step ∞' for unbounded flows is worse than seeing a finite count.

Can I combine tabs and accordions on the same page?

Carefully. Tabs as the primary navigation, accordions as optional drill-downs within a tab is fine. Accordions containing tabs, almost always a sign of a layout you'll regret. Flatten before shipping.

Ship one

The features entry in the directory has tabs and accordions as feature-section variants, with type scale and active-state styling already tuned. For step-based flows, the forms entry covers multi-step wizards. Both pair with the interaction entry, which carries the keyboard and focus rules that tie all three patterns together.