Example: Radio buttons
This test page demonstrates selection-buttons.js from the govuk frontend toolkit, which sets ‘focused’ and ‘selected’ states for the large hit area labels that wrap checkboxes and radio buttons.
It also demonstrates setting ARIA attributes when showing and hiding additional content.
Add a class to your labels for quicker initialisation.
for radio buttons use
class="block-label selection-button-radio"and for checkboxes use
class="block-label selection-button-checkbox"If you don’t add this class it’ll still work, but will be slower for users.