Mark a sibling peer; later siblings react to ITS state.

Example#

html
<input id="tos" type="checkbox" class="peer sr-only" />
<label for="tos" class="peer-checked:bg-blue-500 block w-10 h-6 rounded-full"></label>

Stacking#

Prefix order is screens → variants → utility. These variants combine with every screen (xxs: xs: sm: md:…) and with each other.

Best practices#

  • Custom checkboxes/toggles with zero JS
  • peer must come BEFORE the styled sibling in DOM order

variants/index|Variants hub · responsive/index|Responsive · utilities/index|Utilities