Skip to main content

Checkboxes examples

  • # default

    Open this example in a new tab: button
    What is your nationality? 
    {
  "name": "nationality",
  "fieldset": {
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    },
    {
      "value": "other",
      "text": "Citizen of another country"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "nationality",
  "fieldset": {
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    },
    {
      "value": "other",
      "text": "Citizen of another country"
    }
  ]
}) }}

  • # with hint

    Open this example in a new tab: button
    What is your nationality?
    Select all that apply 
    {
  "name": "nationality",
  "fieldset": {
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "hint": {
    "text": "Select all that apply"
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    },
    {
      "value": "other",
      "text": "Citizen of another country"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "nationality",
  "fieldset": {
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "hint": {
    "text": "Select all that apply"
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    },
    {
      "value": "other",
      "text": "Citizen of another country"
    }
  ]
}) }}

  • # with pre-checked values

    Open this example in a new tab: button
    How do you want to be contacted? 
    {
  "name": "how-contacted-checked",
  "idPrefix": "how-contacted-checked",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "values": [
    "email",
    "text"
  ],
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "how-contacted-checked",
  "idPrefix": "how-contacted-checked",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "values": [
    "email",
    "text"
  ],
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
}) }}

  • # with divider and None

    Open this example in a new tab: button
    Which types of waste do you transport regularly?
    or
    {
  "name": "with-divider-and-none",
  "fieldset": {
    "legend": {
      "text": "Which types of waste do you transport regularly?"
    }
  },
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses"
    },
    {
      "value": "mines",
      "text": "Waste from mines or quarries"
    },
    {
      "value": "farm",
      "text": "Farm or agricultural waste"
    },
    {
      "divider": "or"
    },
    {
      "value": "none",
      "text": "None of these",
      "behaviour": "exclusive"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "with-divider-and-none",
  "fieldset": {
    "legend": {
      "text": "Which types of waste do you transport regularly?"
    }
  },
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses"
    },
    {
      "value": "mines",
      "text": "Waste from mines or quarries"
    },
    {
      "value": "farm",
      "text": "Farm or agricultural waste"
    },
    {
      "divider": "or"
    },
    {
      "value": "none",
      "text": "None of these",
      "behaviour": "exclusive"
    }
  ]
}) }}

  • # with divider, None and conditional items

    Open this example in a new tab: button
    Do you have any access needs?
    or
    {
  "name": "with-divider-and-none-and-conditional-items",
  "fieldset": {
    "legend": {
      "text": "Do you have any access needs?"
    }
  },
  "items": [
    {
      "value": "accessible-toilets",
      "text": "Accessible toilets available"
    },
    {
      "value": "braille",
      "text": "Braille translation service available"
    },
    {
      "value": "disabled-car-parking",
      "text": "Disabled car parking available"
    },
    {
      "value": "another-access-need",
      "text": "Another access need",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"other-access-needs\">Other access needs</label>\n<textarea class=\"govuk-textarea govuk-!-width-one-third\" name=\"other-access-needs\" id=\"other-access-needs\"></textarea>\n"
      }
    },
    {
      "divider": "or"
    },
    {
      "value": "none",
      "text": "None of these",
      "behaviour": "exclusive"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "with-divider-and-none-and-conditional-items",
  "fieldset": {
    "legend": {
      "text": "Do you have any access needs?"
    }
  },
  "items": [
    {
      "value": "accessible-toilets",
      "text": "Accessible toilets available"
    },
    {
      "value": "braille",
      "text": "Braille translation service available"
    },
    {
      "value": "disabled-car-parking",
      "text": "Disabled car parking available"
    },
    {
      "value": "another-access-need",
      "text": "Another access need",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"other-access-needs\">Other access needs</label>\n<textarea class=\"govuk-textarea govuk-!-width-one-third\" name=\"other-access-needs\" id=\"other-access-needs\"></textarea>\n"
      }
    },
    {
      "divider": "or"
    },
    {
      "value": "none",
      "text": "None of these",
      "behaviour": "exclusive"
    }
  ]
}) }}

  • # with hints on items

    Open this example in a new tab: button
    How do you want to sign in?
    You'll have a user ID if you've registered for Self Assessment or filed a tax return online before.
    You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity. 
    {
  "name": "with-hints-on-items",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?"
    }
  },
  "items": [
    {
      "name": "gateway",
      "id": "government-gateway",
      "value": "gov-gateway",
      "text": "Sign in with Government Gateway",
      "hint": {
        "text": "You'll have a user ID if you've registered for Self Assessment or filed a tax return online before."
      }
    },
    {
      "name": "verify",
      "id": "govuk-verify",
      "value": "gov-verify",
      "text": "Sign in with GOV.UK Verify",
      "hint": {
        "text": "You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "with-hints-on-items",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?"
    }
  },
  "items": [
    {
      "name": "gateway",
      "id": "government-gateway",
      "value": "gov-gateway",
      "text": "Sign in with Government Gateway",
      "hint": {
        "text": "You'll have a user ID if you've registered for Self Assessment or filed a tax return online before."
      }
    },
    {
      "name": "verify",
      "id": "govuk-verify",
      "value": "gov-verify",
      "text": "Sign in with GOV.UK Verify",
      "hint": {
        "text": "You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
      }
    }
  ]
}) }}

  • # with legend as a page heading

    Open this example in a new tab: button

    Which types of waste do you transport regularly?

    Select all that apply 
    {
  "name": "waste",
  "fieldset": {
    "legend": {
      "text": "Which types of waste do you transport regularly?",
      "classes": "govuk-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "hint": {
    "text": "Select all that apply"
  },
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses"
    },
    {
      "value": "mines",
      "text": "Waste from mines or quarries"
    },
    {
      "value": "farm",
      "text": "Farm or agricultural waste"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "waste",
  "fieldset": {
    "legend": {
      "text": "Which types of waste do you transport regularly?",
      "classes": "govuk-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "hint": {
    "text": "Select all that apply"
  },
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses"
    },
    {
      "value": "mines",
      "text": "Waste from mines or quarries"
    },
    {
      "value": "farm",
      "text": "Farm or agricultural waste"
    }
  ]
}) }}

  • # with error message

    Open this example in a new tab: button
    Which types of waste do you transport regularly?

    Error: Please select an option

    Nullam id dolor id nibh ultricies vehicula ut id elit.
    Nullam id dolor id nibh ultricies vehicula ut id elit.
    Nullam id dolor id nibh ultricies vehicula ut id elit. 
    {
  "name": "waste",
  "errorMessage": {
    "text": "Please select an option"
  },
  "fieldset": {
    "legend": {
      "text": "Which types of waste do you transport regularly?"
    }
  },
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses",
      "hint": {
        "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
      }
    },
    {
      "value": "mines",
      "text": "Waste from mines or quarries",
      "hint": {
        "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
      }
    },
    {
      "value": "farm",
      "text": "Farm or agricultural waste",
      "hint": {
        "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "waste",
  "errorMessage": {
    "text": "Please select an option"
  },
  "fieldset": {
    "legend": {
      "text": "Which types of waste do you transport regularly?"
    }
  },
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses",
      "hint": {
        "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
      }
    },
    {
      "value": "mines",
      "text": "Waste from mines or quarries",
      "hint": {
        "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
      }
    },
    {
      "value": "farm",
      "text": "Farm or agricultural waste",
      "hint": {
        "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
      }
    }
  ]
}) }}

  • # with very long option text

    Open this example in a new tab: button
    Maecenas faucibus mollis interdum?
    Nullam id dolor id nibh ultricies vehicula ut id elit. 
    {
  "name": "waste",
  "hint": {
    "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
  },
  "fieldset": {
    "legend": {
      "text": "Maecenas faucibus mollis interdum?"
    }
  },
  "items": [
    {
      "value": "nullam",
      "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
    },
    {
      "value": "aenean",
      "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
    },
    {
      "value": "fusce",
      "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "waste",
  "hint": {
    "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
  },
  "fieldset": {
    "legend": {
      "text": "Maecenas faucibus mollis interdum?"
    }
  },
  "items": [
    {
      "value": "nullam",
      "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
    },
    {
      "value": "aenean",
      "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
    },
    {
      "value": "fusce",
      "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
    }
  ]
}) }}

  • # with conditional items

    Open this example in a new tab: button
    How do you want to be contacted? 
    {
  "name": "with-conditional-items",
  "idPrefix": "how-contacted",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "with-conditional-items",
  "idPrefix": "how-contacted",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
}) }}

  • # with optional form-group classes showing group error

    Open this example in a new tab: button
    How do you want to be contacted?
    Problem with input 
    {
  "name": "how-contacted-checked",
  "idPrefix": "how-contacted-checked",
  "formGroup": {
    "classes": "govuk-form-group--error"
  },
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "checked": true,
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n<input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "how-contacted-checked",
  "idPrefix": "how-contacted-checked",
  "formGroup": {
    "classes": "govuk-form-group--error"
  },
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "checked": true,
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n<input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
}) }}

  • # small

    Open this example in a new tab: button
    Filter by 
    {
  "idPrefix": "nationality",
  "name": "nationality",
  "classes": "govuk-checkboxes--small",
  "fieldset": {
    "legend": {
      "text": "Filter by"
    }
  },
  "items": [
    {
      "value": "a",
      "text": "a thing"
    },
    {
      "value": "b",
      "text": "another thing"
    },
    {
      "value": "c",
      "text": "this thing"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "idPrefix": "nationality",
  "name": "nationality",
  "classes": "govuk-checkboxes--small",
  "fieldset": {
    "legend": {
      "text": "Filter by"
    }
  },
  "items": [
    {
      "value": "a",
      "text": "a thing"
    },
    {
      "value": "b",
      "text": "another thing"
    },
    {
      "value": "c",
      "text": "this thing"
    }
  ]
}) }}

  • # small with long text

    Open this example in a new tab: button
    Filter by 
    {
  "idPrefix": "nationality",
  "name": "nationality",
  "classes": "govuk-checkboxes--small",
  "fieldset": {
    "legend": {
      "text": "Filter by"
    }
  },
  "items": [
    {
      "value": "nullam",
      "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
    },
    {
      "value": "aenean",
      "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
    },
    {
      "value": "fusce",
      "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "idPrefix": "nationality",
  "name": "nationality",
  "classes": "govuk-checkboxes--small",
  "fieldset": {
    "legend": {
      "text": "Filter by"
    }
  },
  "items": [
    {
      "value": "nullam",
      "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
    },
    {
      "value": "aenean",
      "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
    },
    {
      "value": "fusce",
      "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
    }
  ]
}) }}

  • # small with error

    Open this example in a new tab: button
    Filter by

    Error: Select a thing 

    {
  "idPrefix": "nationality",
  "name": "nationality",
  "classes": "govuk-checkboxes--small",
  "errorMessage": {
    "text": "Select a thing"
  },
  "fieldset": {
    "legend": {
      "text": "Filter by"
    }
  },
  "items": [
    {
      "value": "a",
      "text": "a thing"
    },
    {
      "value": "b",
      "text": "another thing"
    },
    {
      "value": "c",
      "text": "this thing"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "idPrefix": "nationality",
  "name": "nationality",
  "classes": "govuk-checkboxes--small",
  "errorMessage": {
    "text": "Select a thing"
  },
  "fieldset": {
    "legend": {
      "text": "Filter by"
    }
  },
  "items": [
    {
      "value": "a",
      "text": "a thing"
    },
    {
      "value": "b",
      "text": "another thing"
    },
    {
      "value": "c",
      "text": "this thing"
    }
  ]
}) }}

  • # small with hint

    Open this example in a new tab: button
    Filter by
    hint for a thing 
    {
  "idPrefix": "nationality",
  "name": "nationality",
  "classes": "govuk-checkboxes--small",
  "fieldset": {
    "legend": {
      "text": "Filter by"
    }
  },
  "items": [
    {
      "value": "a",
      "text": "a thing",
      "hint": {
        "text": "hint for a thing"
      }
    },
    {
      "value": "b",
      "text": "another thing"
    },
    {
      "value": "c",
      "text": "this thing"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "idPrefix": "nationality",
  "name": "nationality",
  "classes": "govuk-checkboxes--small",
  "fieldset": {
    "legend": {
      "text": "Filter by"
    }
  },
  "items": [
    {
      "value": "a",
      "text": "a thing",
      "hint": {
        "text": "hint for a thing"
      }
    },
    {
      "value": "b",
      "text": "another thing"
    },
    {
      "value": "c",
      "text": "this thing"
    }
  ]
}) }}

  • # small with conditional reveal

    Open this example in a new tab: button
    How do you want to be contacted? 
    {
  "name": "how-contacted",
  "idPrefix": "how-contacted",
  "classes": "govuk-checkboxes--small",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "a",
      "text": "a thing",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"context-email\">Foo</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "b",
      "text": "another thing"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "how-contacted",
  "idPrefix": "how-contacted",
  "classes": "govuk-checkboxes--small",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "a",
      "text": "a thing",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"context-email\">Foo</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "b",
      "text": "another thing"
    }
  ]
}) }}

  • # small with divider and None

    Open this example in a new tab: button
    Which types of waste do you transport regularly?
    or
    {
  "name": "small-with-divider-and-none",
  "classes": "govuk-checkboxes--small",
  "fieldset": {
    "legend": {
      "text": "Which types of waste do you transport regularly?"
    }
  },
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses"
    },
    {
      "value": "mines",
      "text": "Waste from mines or quarries"
    },
    {
      "value": "farm",
      "text": "Farm or agricultural waste"
    },
    {
      "divider": "or"
    },
    {
      "value": "none",
      "text": "None of these",
      "behaviour": "exclusive"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "small-with-divider-and-none",
  "classes": "govuk-checkboxes--small",
  "fieldset": {
    "legend": {
      "text": "Which types of waste do you transport regularly?"
    }
  },
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses"
    },
    {
      "value": "mines",
      "text": "Waste from mines or quarries"
    },
    {
      "value": "farm",
      "text": "Farm or agricultural waste"
    },
    {
      "divider": "or"
    },
    {
      "value": "none",
      "text": "None of these",
      "behaviour": "exclusive"
    }
  ]
}) }}

  • # with id and name

    Open this example in a new tab: button
    What is your nationality?
    If you have dual nationality, select all options that are relevant to you. 
    {
  "name": "with-id-and-name",
  "fieldset": {
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "hint": {
    "text": "If you have dual nationality, select all options that are relevant to you."
  },
  "items": [
    {
      "name": "british",
      "id": "item_british",
      "value": "yes",
      "text": "British"
    },
    {
      "name": "irish",
      "id": "item_irish",
      "value": "irish",
      "text": "Irish"
    },
    {
      "name": "custom-name-scottish",
      "text": "Scottish",
      "value": "scottish"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "with-id-and-name",
  "fieldset": {
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "hint": {
    "text": "If you have dual nationality, select all options that are relevant to you."
  },
  "items": [
    {
      "name": "british",
      "id": "item_british",
      "value": "yes",
      "text": "British"
    },
    {
      "name": "irish",
      "id": "item_irish",
      "value": "irish",
      "text": "Irish"
    },
    {
      "name": "custom-name-scottish",
      "text": "Scottish",
      "value": "scottish"
    }
  ]
}) }}

  • # with disabled item

    Open this example in a new tab: button

    How do you want to sign in?

    You'll have a user ID if you've registered for Self Assessment or filed a tax return online before.
    You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity. 
    {
  "name": "sign-in",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?",
      "classes": "govuk-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "name": "gateway",
      "id": "government-gateway",
      "value": "gov-gateway",
      "text": "Sign in with Government Gateway",
      "hint": {
        "text": "You'll have a user ID if you've registered for Self Assessment or filed a tax return online before."
      }
    },
    {
      "name": "verify",
      "id": "govuk-verify",
      "value": "gov-verify",
      "text": "Sign in with GOV.UK Verify",
      "hint": {
        "text": "You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
      },
      "disabled": true
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "sign-in",
  "fieldset": {
    "legend": {
      "text": "How do you want to sign in?",
      "classes": "govuk-fieldset__legend--l",
      "isPageHeading": true
    }
  },
  "items": [
    {
      "name": "gateway",
      "id": "government-gateway",
      "value": "gov-gateway",
      "text": "Sign in with Government Gateway",
      "hint": {
        "text": "You'll have a user ID if you've registered for Self Assessment or filed a tax return online before."
      }
    },
    {
      "name": "verify",
      "id": "govuk-verify",
      "value": "gov-verify",
      "text": "Sign in with GOV.UK Verify",
      "hint": {
        "text": "You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
      },
      "disabled": true
    }
  ]
}) }}

  • # with idPrefix

    Open this example in a new tab: button 
    {
  "name": "example-name",
  "idPrefix": "nationality",
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example-name",
  "idPrefix": "nationality",
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2"
    }
  ]
}) }}

  • # with falsy values

    Open this example in a new tab: button 
    {
  "name": "example-name",
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    false,
    null,
    "",
    {
      "value": 2,
      "text": "Option 2"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example-name",
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    false,
    null,
    "",
    {
      "value": 2,
      "text": "Option 2"
    }
  ]
}) }}

  • # classes

    Open this example in a new tab: button 
    {
  "name": "example-name",
  "classes": "app-checkboxes--custom-modifier",
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example-name",
  "classes": "app-checkboxes--custom-modifier",
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2"
    }
  ]
}) }}

  • # with fieldset describedBy

    Open this example in a new tab: button
    Which option?
    If you have dual nationality, select all options that are relevant to you. 
    {
  "name": "example-name",
  "fieldset": {
    "describedBy": "test-target-element",
    "legend": {
      "text": "Which option?"
    }
  },
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2"
    }
  ],
  "hint": {
    "text": "If you have dual nationality, select all options that are relevant to you."
  }
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example-name",
  "fieldset": {
    "describedBy": "test-target-element",
    "legend": {
      "text": "Which option?"
    }
  },
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2"
    }
  ],
  "hint": {
    "text": "If you have dual nationality, select all options that are relevant to you."
  }
}) }}

  • # attributes

    Open this example in a new tab: button 
    {
  "name": "example-name",
  "attributes": {
    "data-attribute": "value",
    "data-second-attribute": "second-value"
  },
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example-name",
  "attributes": {
    "data-attribute": "value",
    "data-second-attribute": "second-value"
  },
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2"
    }
  ]
}) }}

  • # with checked item

    Open this example in a new tab: button 
    {
  "name": "example-name",
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2",
      "checked": true
    },
    {
      "value": 3,
      "text": "Option 3",
      "checked": true
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example-name",
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2",
      "checked": true
    },
    {
      "value": 3,
      "text": "Option 3",
      "checked": true
    }
  ]
}) }}

  • # items with attributes

    Open this example in a new tab: button 
    {
  "name": "example-name",
  "items": [
    {
      "value": 1,
      "text": "Option 1",
      "attributes": {
        "data-attribute": "ABC",
        "data-second-attribute": "DEF"
      }
    },
    {
      "value": 2,
      "text": "Option 2",
      "attributes": {
        "data-attribute": "GHI",
        "data-second-attribute": "JKL"
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example-name",
  "items": [
    {
      "value": 1,
      "text": "Option 1",
      "attributes": {
        "data-attribute": "ABC",
        "data-second-attribute": "DEF"
      }
    },
    {
      "value": 2,
      "text": "Option 2",
      "attributes": {
        "data-attribute": "GHI",
        "data-second-attribute": "JKL"
      }
    }
  ]
}) }}

  • # empty conditional

    Open this example in a new tab: button 
    {
  "name": "example-conditional",
  "items": [
    {
      "value": "foo",
      "text": "Foo",
      "conditional": {
        "html": false
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example-conditional",
  "items": [
    {
      "value": "foo",
      "text": "Foo",
      "conditional": {
        "html": false
      }
    }
  ]
}) }}

  • # with label classes

    Open this example in a new tab: button 
    {
  "name": "example-label-classes",
  "items": [
    {
      "value": "yes",
      "text": "Yes",
      "label": {
        "classes": "bold"
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example-label-classes",
  "items": [
    {
      "value": "yes",
      "text": "Yes",
      "label": {
        "classes": "bold"
      }
    }
  ]
}) }}

  • # multiple hints

    Open this example in a new tab: button
    If you have dual nationality, select all options that are relevant to you.
    Hint for british option here
    Hint for other option here 
    {
  "name": "example-multiple-hints",
  "hint": {
    "text": "If you have dual nationality, select all options that are relevant to you."
  },
  "items": [
    {
      "value": "british",
      "text": "British",
      "hint": {
        "text": "Hint for british option here"
      }
    },
    {
      "value": "irish",
      "text": "Irish"
    },
    {
      "value": "other",
      "text": "Citizen of another country",
      "hint": {
        "text": "Hint for other option here"
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example-multiple-hints",
  "hint": {
    "text": "If you have dual nationality, select all options that are relevant to you."
  },
  "items": [
    {
      "value": "british",
      "text": "British",
      "hint": {
        "text": "Hint for british option here"
      }
    },
    {
      "value": "irish",
      "text": "Irish"
    },
    {
      "value": "other",
      "text": "Citizen of another country",
      "hint": {
        "text": "Hint for other option here"
      }
    }
  ]
}) }}

  • # with conditional items with special characters

    Open this example in a new tab: button
    How do you want to be contacted? 
    {
  "name": "contact-prefs",
  "idPrefix": "user.profile[contact-prefs]",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "contact-prefs",
  "idPrefix": "user.profile[contact-prefs]",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
}) }}

  • # with error message and hint

    Open this example in a new tab: button
    What is your nationality?
    If you have dual nationality, select all options that are relevant to you.

    Error: Please select an option 

    {
  "name": "example",
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    }
  ],
  "errorMessage": {
    "text": "Please select an option"
  },
  "fieldset": {
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "hint": {
    "text": "If you have dual nationality, select all options that are relevant to you."
  }
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example",
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    }
  ],
  "errorMessage": {
    "text": "Please select an option"
  },
  "fieldset": {
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "hint": {
    "text": "If you have dual nationality, select all options that are relevant to you."
  }
}) }}

  • # with error, hint and fieldset describedBy

    Open this example in a new tab: button
    What is your nationality?
    If you have dual nationality, select all options that are relevant to you.

    Error: Please select an option 

    {
  "name": "example",
  "errorMessage": {
    "text": "Please select an option"
  },
  "fieldset": {
    "describedBy": "test-target-element",
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "hint": {
    "text": "If you have dual nationality, select all options that are relevant to you."
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example",
  "errorMessage": {
    "text": "Please select an option"
  },
  "fieldset": {
    "describedBy": "test-target-element",
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "hint": {
    "text": "If you have dual nationality, select all options that are relevant to you."
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    }
  ]
}) }}

  • # label with attributes

    Open this example in a new tab: button 
    {
  "name": "example-name",
  "items": [
    {
      "value": 1,
      "html": "<b>Option 1</b>",
      "label": {
        "attributes": {
          "data-attribute": "value",
          "data-second-attribute": "second-value"
        }
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example-name",
  "items": [
    {
      "value": 1,
      "html": "<b>Option 1</b>",
      "label": {
        "attributes": {
          "data-attribute": "value",
          "data-second-attribute": "second-value"
        }
      }
    }
  ]
}) }}

  • # fieldset params

    Open this example in a new tab: button
    What is your nationality?

    Error: Please select an option 

    {
  "name": "example-name",
  "errorMessage": {
    "text": "Please select an option"
  },
  "fieldset": {
    "legend": {
      "text": "What is your nationality?"
    },
    "classes": "app-fieldset--custom-modifier",
    "attributes": {
      "data-attribute": "value",
      "data-second-attribute": "second-value"
    }
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example-name",
  "errorMessage": {
    "text": "Please select an option"
  },
  "fieldset": {
    "legend": {
      "text": "What is your nationality?"
    },
    "classes": "app-fieldset--custom-modifier",
    "attributes": {
      "data-attribute": "value",
      "data-second-attribute": "second-value"
    }
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    }
  ]
}) }}

  • # fieldset html params

    Open this example in a new tab: button
    What is your nationality? 
    {
  "name": "example-name",
  "fieldset": {
    "legend": {
      "html": "What is your <b>nationality</b>?"
    }
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example-name",
  "fieldset": {
    "legend": {
      "html": "What is your <b>nationality</b>?"
    }
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    }
  ]
}) }}

  • # with single option set 'aria-describedby' on input, and describedBy

    Open this example in a new tab: button
    Please accept the terms and conditions 
    {
  "describedBy": "test-target-element",
  "name": "t-and-c",
  "hint": {
    "text": "Please accept the terms and conditions"
  },
  "items": [
    {
      "value": "yes",
      "text": "I agree to the terms and conditions"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "describedBy": "test-target-element",
  "name": "t-and-c",
  "hint": {
    "text": "Please accept the terms and conditions"
  },
  "items": [
    {
      "value": "yes",
      "text": "I agree to the terms and conditions"
    }
  ]
}) }}

  • # with single option (and hint) set 'aria-describedby' on input, and describedBy

    Open this example in a new tab: button
    Please accept the terms and conditions
    Go on, you know you want to! 
    {
  "describedBy": "test-target-element",
  "name": "t-and-c-with-hint",
  "hint": {
    "text": "Please accept the terms and conditions"
  },
  "items": [
    {
      "value": "yes",
      "text": "I agree to the terms and conditions",
      "hint": {
        "text": "Go on, you know you want to!"
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "describedBy": "test-target-element",
  "name": "t-and-c-with-hint",
  "hint": {
    "text": "Please accept the terms and conditions"
  },
  "items": [
    {
      "value": "yes",
      "text": "I agree to the terms and conditions",
      "hint": {
        "text": "Go on, you know you want to!"
      }
    }
  ]
}) }}

  • # with error and idPrefix

    Open this example in a new tab: button

    Error: Please select an option 

    {
  "name": "name-of-checkboxes",
  "errorMessage": {
    "text": "Please select an option"
  },
  "idPrefix": "id-prefix",
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "name-of-checkboxes",
  "errorMessage": {
    "text": "Please select an option"
  },
  "idPrefix": "id-prefix",
  "items": [
    {
      "value": "animal",
      "text": "Waste from animal carcasses"
    }
  ]
}) }}

  • # with error message and fieldset describedBy

    Open this example in a new tab: button
    What is your nationality?

    Error: Please select an option 

    {
  "name": "example",
  "errorMessage": {
    "text": "Please select an option"
  },
  "fieldset": {
    "describedBy": "test-target-element",
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "example",
  "errorMessage": {
    "text": "Please select an option"
  },
  "fieldset": {
    "describedBy": "test-target-element",
    "legend": {
      "text": "What is your nationality?"
    }
  },
  "items": [
    {
      "value": "british",
      "text": "British"
    },
    {
      "value": "irish",
      "text": "Irish"
    }
  ]
}) }}

  • # with conditional item checked

    Open this example in a new tab: button
    How do you want to be contacted? 
    {
  "name": "how-contacted-checked",
  "idPrefix": "how-contacted-checked",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "checked": true,
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "how-contacted-checked",
  "idPrefix": "how-contacted-checked",
  "fieldset": {
    "legend": {
      "text": "How do you want to be contacted?"
    }
  },
  "items": [
    {
      "value": "email",
      "text": "Email",
      "checked": true,
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
      }
    },
    {
      "value": "phone",
      "text": "Phone",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
      }
    },
    {
      "value": "text",
      "text": "Text message",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
      }
    }
  ]
}) }}

  • # item checked overrides values

    Open this example in a new tab: button 
    {
  "name": "colors",
  "items": [
    {
      "value": "red",
      "text": "Red"
    },
    {
      "value": "green",
      "text": "Green",
      "checked": false
    },
    {
      "value": "blue",
      "text": "Blue"
    }
  ],
  "values": [
    "red",
    "green"
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "colors",
  "items": [
    {
      "value": "red",
      "text": "Red"
    },
    {
      "value": "green",
      "text": "Green",
      "checked": false
    },
    {
      "value": "blue",
      "text": "Blue"
    }
  ],
  "values": [
    "red",
    "green"
  ]
}) }}

  • # textarea in conditional

    Open this example in a new tab: button
    Test 
    {
  "name": "conditional",
  "fieldset": {
    "legend": {
      "text": "Test"
    }
  },
  "items": [
    {
      "value": "other",
      "text": "Other",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"conditional-textarea\">textarea</label>\n<textarea class=\"govuk-textarea\" name=\"conditional-textarea\" id=\"conditional-textarea\">\ntest\n</textarea>\n"
      }
    }
  ]
}
    
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  "name": "conditional",
  "fieldset": {
    "legend": {
      "text": "Test"
    }
  },
  "items": [
    {
      "value": "other",
      "text": "Other",
      "conditional": {
        "html": "<label class=\"govuk-label\" for=\"conditional-textarea\">textarea</label>\n<textarea class=\"govuk-textarea\" name=\"conditional-textarea\" id=\"conditional-textarea\">\ntest\n</textarea>\n"
      }
    }
  ]
}) }}