Как сделать вкладки
Короткий ответ
Каждая вкладка — радиокнопка с подписью. Показывается панель, стоящая после отмеченной кнопки:
<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>Как это работает
Радиокнопки с одинаковым name позволяют выбрать только одну. Сами кнопки спрятаны, а нажатие на label отмечает свою кнопку. order: 1 переносит все панели в конец flex-строки, а width: 100% ставит их на отдельную строку под заголовками.
Когда нужен JavaScript
Вариант на CSS работает с клавиатурой (стрелки переключают радиокнопки), но экранный диктор объявит их как радиокнопки, а не вкладки. Для полной доступности делают кнопки с ролями tablist, tab и tabpanel и переключают атрибуты aria-selected и hidden скриптом.
Частая ошибка
Прятать радиокнопки через display: none. Тогда до них нельзя добраться клавишей Tab, и вкладки работают только мышью. Скрывайте их визуально — через opacity: 0 и position: absolute, как в примере.
Функции из этого ответа
- <input type="checkbox"> — Флажок (`checkbox`) — независимый выбор «да/нет»; переключатель (`radio`) — один вариант из группы.
- :checked — Срабатывает у отмеченного флажка или переключателя и у выбранного `<option>`.
- <label> — Подпись к полю формы.
- order — Меняет видимый порядок flex- или grid-элемента.