How to make tabs
Short answer
Each tab is a radio button with a label. The panel after the checked button is shown:
<style>
.tabs { display: flex; flex-wrap: wrap; }
.tabs input { position: absolute; opacity: 0; }
.tabs label { padding: 8px 14px; cursor: pointer; border-bottom: 2px solid gainsboro; }
.tabs input:checked + label { border-color: royalblue; color: royalblue; }
.tabs input:focus-visible + label { outline: 2px solid orange; }
.tabs .panel { display: none; order: 1; width: 100%; padding: 12px; background: whitesmoke; }
.tabs input:checked + label + .panel { display: block; }
</style>
<div class="tabs">
<input type="radio" name="tab" id="t1" checked><label for="t1">Description</label><div class="panel">Soft cotton T-shirt.</div>
<input type="radio" name="tab" id="t2"><label for="t2">Sizes</label><div class="panel">S, M, L, XL</div>
<input type="radio" name="tab" id="t3"><label for="t3">Reviews</label><div class="panel">4.8 out of 5</div>
</div>How it works
Radio buttons with the same name allow only one choice. The buttons are hidden, and clicking a label checks its button. order: 1 moves all the panels to the end of the flex row, and width: 100% puts them on their own line below the tabs.
When you need JavaScript
The CSS version works with the keyboard (arrow keys switch the radio buttons), but a screen reader announces them as radio buttons, not tabs. For full accessibility build buttons with the tablist, tab and tabpanel roles and toggle aria-selected and hidden with a script.
Common mistake
Hiding the radio buttons with display: none. Then they cannot be reached with Tab, and the tabs only work with a mouse. Hide them visually — with opacity: 0 and position: absolute, as in the example.
Functions used in this recipe
- <input type="checkbox"> — A checkbox is an independent yes/no choice; a radio button picks one option from a group.
- :checked — Matches a checked checkbox or radio button, and a selected `<option>`.
- <label> — A label for a form field.
- order — Changes the visual order of a flex or grid item.