Tabs
A set of labels that switches one area between sibling views, like Overview, Activity, and Settings.
See it
What it is
Tabs are a row or column of labels that switch one shared area between sibling panels. Only one tab is active, and the panel changes in place without stacking every section down the page. Browser tabs made the metaphor universal, but interface tabs usually switch views inside one page: Overview, Activity, Settings.
Reach for tabs when the panels are peers, users benefit from moving between them quickly, and the labels fit without wrapping. Use links for separate destinations that should behave like pages, an accordion when several sections may stay open, and a select when narrow screens cannot hold the labels.
Gotcha: the selected style is not enough. A keyboard user expects Left and Right arrows to move through the tablist, with only the active tab in the normal Tab order. Each tab must name its matching panel. Do not switch automatically on focus if loading a panel is slow, because arrowing through the labels will keep triggering unwanted work.
Ask AI for it
Build an accessible three-tab interface for Overview, Activity, and Settings using the WAI-ARIA tabs pattern. Use role='tablist', role='tab', and role='tabpanel'; connect each pair with aria-controls and aria-labelledby. Keep only the active tab at tabIndex=0, use a roving tabindex for Left and Right arrow navigation, and support Home and End. Show the active tab with a 2px underline using border-bottom and hide inactive panels with the hidden attribute. Preserve focus when switching, keep panel height changes from shifting the tab row, and horizontally scroll the tablist below 480px.