About this project
A fully CSS-driven tab component — no JavaScript involved. It uses hidden radio inputs paired with label elements. When a label is clicked, its linked radio becomes :checked, and CSS sibling selectors reveal the matching panel.
Works in all modern browsers and degrades gracefully. Fully keyboard accessible via Tab + arrow keys.
Key numbers
0
Lines of JS
4
Tabs
100%
CSS powered
Techniques used
:checked selector ~ sibling combinator radio inputs CSS animation
Compatibility
- Chrome / Edge — full support
- Firefox — full support
- Safari — full support
- IE 11 — partial (no animation)
- IE 9 and below — unsupported