Form elements Example: Radio buttons
and checkboxes

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.

What is your nationality?

If you have dual nationality, select all options that are relevant to you.

What is your nationality?

Where should we send your new
passport?

Where should we send your new passport?

Your other address

Your other address

Which part of the Housing Act was your licence isued under?

Select one of the options below.

Which part of the Housing Act was your licence isued under?

Implementation advice

  • 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.