← All Examples

Pagination Component

Numbered page buttons with an active state driven by radio inputs and :checked.

Published June 7, 2026

Demo

Showing results 1–10 of 48 Showing results 11–20 of 48 Showing results 21–30 of 48 Showing results 31–40 of 48 Showing results 41–48 of 48

HTML

<input type="radio" name="page" id="pg1" checked>
<input type="radio" name="page" id="pg2">
<input type="radio" name="page" id="pg3">

<div class="pg-wrap">
  <label for="pg1">1</label>
  <label for="pg2">2</label>
  <label for="pg3">3</label>
</div>

CSS

input[type="radio"] { display: none; }

label {
  /* button styles */
}

#pg1:checked ~ .pg-wrap label[for="pg1"],
#pg2:checked ~ .pg-wrap label[for="pg2"],
#pg3:checked ~ .pg-wrap label[for="pg3"] {
  background: var(--accent);
  color: var(--bg);
}

How it works

Hidden radio inputs track which page is selected. Each numbered <label> targets one radio input. When a label is clicked, its radio becomes :checked. CSS then highlights that label and shows the corresponding content block using the ~ sibling combinator. The active page gets the accent background while unselected pages remain neutral.