Checkboxes - Začiarkavacie políčko
Začiarkavacie políčko
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="british">
<label class="govuk-label govuk-checkboxes__label" for="nationality">
British
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish">
<label class="govuk-label govuk-checkboxes__label" for="nationality-2">
Irish
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other">
<label class="govuk-label govuk-checkboxes__label" for="nationality-3">
Citizen of another country
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "nationality",
items: [
{
value: "british",
text: "British"
},
{
value: "irish",
text: "Irish"
},
{
value: "other",
text: "Citizen of another country"
}
]
}) }}Začiarkavacie políčko with pre-checked values
Otvoriť príklad na novej záložke: začiarkavacie políčko with pre-checked values
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="british" checked>
<label class="govuk-label govuk-checkboxes__label" for="nationality">
British
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish">
<label class="govuk-label govuk-checkboxes__label" for="nationality-2">
Irish
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other" checked data-aria-controls="conditional-nationality-3">
<label class="govuk-label govuk-checkboxes__label" for="nationality-3">
Citizen of another country
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional" id="conditional-nationality-3">
<div class="govuk-form-group">
<label class="govuk-label" for="other-country">
Country
</label>
<input class="govuk-input" id="other-country" name="other-country" type="text" value="Ravka">
</div>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "nationality",
items: [
{
value: "british",
text: "British"
},
{
value: "irish",
text: "Irish"
},
{
value: "other",
text: "Citizen of another country",
conditional: {
html:
'<div class="govuk-form-group">\n' +
' <label class="govuk-label" for="other-country">\n' +
" Country\n" +
" </label>\n" +
' <input class="govuk-input" id="other-country" name="other-country" type="text" value="Ravka">\n' +
"</div>\n"
}
}
],
values: ["british", "other"]
}) }}Začiarkavacie políčko with divider and None
Otvoriť príklad na novej záložke: začiarkavacie políčko with divider and none
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="with-divider-and-none" name="with-divider-and-none" type="checkbox" value="animal">
<label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none">
Waste from animal carcasses
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="with-divider-and-none-2" name="with-divider-and-none" type="checkbox" value="mines">
<label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-2">
Waste from mines or quarries
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="with-divider-and-none-3" name="with-divider-and-none" type="checkbox" value="farm">
<label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-3">
Farm or agricultural waste
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__divider">or</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="with-divider-and-none-5" name="with-divider-and-none" type="checkbox" value="none" data-behaviour="exclusive">
<label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-5">
None of these
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "with-divider-and-none",
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"
}
]
}) }}Začiarkavacie políčko with divider, None and conditional items
Otvoriť príklad na novej záložke: začiarkavacie políčko with divider, none and conditional items
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="with-divider-and-none-and-conditional-items" name="with-divider-and-none-and-conditional-items" type="checkbox" value="accessible-toilets">
<label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-and-conditional-items">
Accessible toilets available
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="with-divider-and-none-and-conditional-items-2" name="with-divider-and-none-and-conditional-items" type="checkbox" value="braille">
<label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-and-conditional-items-2">
Braille translation service available
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="with-divider-and-none-and-conditional-items-3" name="with-divider-and-none-and-conditional-items" type="checkbox" value="disabled-car-parking">
<label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-and-conditional-items-3">
Disabled car parking available
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="with-divider-and-none-and-conditional-items-4" name="with-divider-and-none-and-conditional-items" type="checkbox" value="another-access-need" data-aria-controls="conditional-with-divider-and-none-and-conditional-items-4">
<label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-and-conditional-items-4">
Another access need
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-with-divider-and-none-and-conditional-items-4">
<label class="govuk-label" for="other-access-needs">Other access needs</label>
<textarea class="govuk-textarea govuk-!-width-one-third" name="other-access-needs" id="other-access-needs"></textarea>
</div>
<div class="govuk-checkboxes__divider">or</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="with-divider-and-none-and-conditional-items-6" name="with-divider-and-none-and-conditional-items" type="checkbox" value="none" data-behaviour="exclusive">
<label class="govuk-label govuk-checkboxes__label" for="with-divider-and-none-and-conditional-items-6">
None of these
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "with-divider-and-none-and-conditional-items",
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"
}
]
}) }}Začiarkavacie políčko with id and name
Otvoriť príklad na novej záložke: začiarkavacie políčko with id and name
Code
Markup
<div class="govuk-form-group">
<div id="with-id-and-name-hint" class="govuk-hint">
If you have dual nationality, select all options that are relevant to you.
</div>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="item_british" name="british" type="checkbox" value="yes" aria-describedby="with-id-and-name-hint">
<label class="govuk-label govuk-checkboxes__label" for="item_british">
British
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="item_irish" name="irish" type="checkbox" value="irish" aria-describedby="with-id-and-name-hint">
<label class="govuk-label govuk-checkboxes__label" for="item_irish">
Irish
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="with-id-and-name-3" name="custom-name-scottish" type="checkbox" value="scottish" aria-describedby="with-id-and-name-hint">
<label class="govuk-label govuk-checkboxes__label" for="with-id-and-name-3">
Scottish
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "with-id-and-name",
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"
}
]
}) }}Začiarkavacie políčko with hints on items
Otvoriť príklad na novej záložke: začiarkavacie políčko with hints on items
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="government-gateway" name="gateway" type="checkbox" value="gov-gateway" aria-describedby="government-gateway-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="government-gateway">
Sign in with Government Gateway
<span class="idsk-required">*</span>
</label>
<div id="government-gateway-item-hint" class="govuk-hint govuk-checkboxes__hint">
You'll have a user ID if you've registered for Self Assessment or filed a tax return online before.
</div>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="govuk-verify" name="verify" type="checkbox" value="gov-verify" aria-describedby="govuk-verify-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="govuk-verify">
Sign in with GOV.UK Verify
<span class="idsk-required">*</span>
</label>
<div id="govuk-verify-item-hint" class="govuk-hint govuk-checkboxes__hint">
You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
</div>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "with-hints-on-items",
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."
}
}
]
}) }}Začiarkavacie políčko with disabled item
Otvoriť príklad na novej záložke: začiarkavacie políčko with disabled item
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="government-gateway" name="gateway" type="checkbox" value="gov-gateway" aria-describedby="government-gateway-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="government-gateway">
Sign in with Government Gateway
<span class="idsk-required">*</span>
</label>
<div id="government-gateway-item-hint" class="govuk-hint govuk-checkboxes__hint">
You'll have a user ID if you've registered for Self Assessment or filed a tax return online before.
</div>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="govuk-verify" name="verify" type="checkbox" value="gov-verify" disabled aria-describedby="govuk-verify-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="govuk-verify">
Sign in with GOV.UK Verify
<span class="idsk-required">*</span>
</label>
<div id="govuk-verify-item-hint" class="govuk-hint govuk-checkboxes__hint">
You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
</div>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "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."
},
disabled: true
}
]
}) }}Začiarkavacie políčko with legend as a page heading
Otvoriť príklad na novej záložke: začiarkavacie políčko with legend as a page heading
Code
Markup
<div class="govuk-form-group">
<div id="waste-hint" class="govuk-hint">
Select all that apply
</div>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste" name="waste" type="checkbox" value="animal" aria-describedby="waste-hint">
<label class="govuk-label govuk-checkboxes__label" for="waste">
Waste from animal carcasses
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines" aria-describedby="waste-hint">
<label class="govuk-label govuk-checkboxes__label" for="waste-2">
Waste from mines or quarries
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm" aria-describedby="waste-hint">
<label class="govuk-label govuk-checkboxes__label" for="waste-3">
Farm or agricultural waste
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "waste",
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"
}
]
}) }}Začiarkavacie políčko with a medium legend
Otvoriť príklad na novej záložke: začiarkavacie políčko with a medium legend
Code
Markup
<div class="govuk-form-group govuk-form-group--error">
<div id="waste-hint" class="govuk-hint">
Select all that apply
</div>
<p id="waste-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Select which types of waste you transport regularly
</p>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste" name="waste" type="checkbox" value="animal" aria-describedby="waste-hint waste-error">
<label class="govuk-label govuk-checkboxes__label" for="waste">
Waste from animal carcasses
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines" aria-describedby="waste-hint waste-error">
<label class="govuk-label govuk-checkboxes__label" for="waste-2">
Waste from mines or quarries
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm" aria-describedby="waste-hint waste-error">
<label class="govuk-label govuk-checkboxes__label" for="waste-3">
Farm or agricultural waste
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "waste",
hint: {
text: "Select all that apply"
},
errorMessage: {
text: "Select which types of waste 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"
}
]
}) }}Začiarkavacie políčko without fieldset
Otvoriť príklad na novej záložke: začiarkavacie políčko without fieldset
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="colours" name="colours" type="checkbox" value="red">
<label class="govuk-label govuk-checkboxes__label" for="colours">
Red
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="colours-2" name="colours" type="checkbox" value="green">
<label class="govuk-label govuk-checkboxes__label" for="colours-2">
Green
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="colours-3" name="colours" type="checkbox" value="blue">
<label class="govuk-label govuk-checkboxes__label" for="colours-3">
Blue
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "colours",
items: [
{
value: "red",
text: "Red"
},
{
value: "green",
text: "Green"
},
{
value: "blue",
text: "Blue"
}
]
}) }}Začiarkavacie políčko with single option set 'aria-describedby' on input
Code
Markup
<div class="govuk-form-group govuk-form-group--error">
<p id="t-and-c-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Please accept the terms and conditions
</p>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="t-and-c" name="t-and-c" type="checkbox" value="yes" aria-describedby="t-and-c-error">
<label class="govuk-label govuk-checkboxes__label" for="t-and-c">
I agree to the terms and conditions
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "t-and-c",
errorMessage: {
text: "Please accept the terms and conditions"
},
items: [
{
value: "yes",
text: "I agree to the terms and conditions"
}
]
}) }}Začiarkavacie políčko with single option (and hint) set 'aria-describedby' on input
Code
Markup
<div class="govuk-form-group govuk-form-group--error">
<p id="t-and-c-with-hint-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Please accept the terms and conditions
</p>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="t-and-c-with-hint" name="t-and-c-with-hint" type="checkbox" value="yes" aria-describedby="t-and-c-with-hint-error t-and-c-with-hint-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="t-and-c-with-hint">
I agree to the terms and conditions
<span class="idsk-required">*</span>
</label>
<div id="t-and-c-with-hint-item-hint" class="govuk-hint govuk-checkboxes__hint">
Go on, you know you want to!
</div>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "t-and-c-with-hint",
errorMessage: {
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!"
}
}
]
}) }}Začiarkavacie políčko with fieldset and error message
Otvoriť príklad na novej záložke: začiarkavacie políčko with fieldset and error message
Code
Markup
<div class="govuk-form-group govuk-form-group--error">
<p id="nationality-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Please accept the terms and conditions
</p>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="british" aria-describedby="nationality-error">
<label class="govuk-label govuk-checkboxes__label" for="nationality">
British
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish" aria-describedby="nationality-error">
<label class="govuk-label govuk-checkboxes__label" for="nationality-2">
Irish
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other" aria-describedby="nationality-error">
<label class="govuk-label govuk-checkboxes__label" for="nationality-3">
Citizen of another country
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "nationality",
errorMessage: {
text: "Please accept the terms and conditions"
},
items: [
{
value: "british",
text: "British"
},
{
value: "irish",
text: "Irish"
},
{
value: "other",
text: "Citizen of another country"
}
]
}) }}Začiarkavacie políčko with error message
Otvoriť príklad na novej záložke: začiarkavacie políčko with error message
Code
Markup
<div class="govuk-form-group govuk-form-group--error">
<p id="waste-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Please select an option
</p>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste" name="waste" type="checkbox" value="animal" aria-describedby="waste-error">
<label class="govuk-label govuk-checkboxes__label" for="waste">
Waste from animal carcasses
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines" aria-describedby="waste-error">
<label class="govuk-label govuk-checkboxes__label" for="waste-2">
Waste from mines or quarries
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm" aria-describedby="waste-error">
<label class="govuk-label govuk-checkboxes__label" for="waste-3">
Farm or agricultural waste
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "waste",
errorMessage: {
text: "Please select an option"
},
items: [
{
value: "animal",
text: "Waste from animal carcasses"
},
{
value: "mines",
text: "Waste from mines or quarries"
},
{
value: "farm",
text: "Farm or agricultural waste"
}
]
}) }}Začiarkavacie políčko with error message and hints on items
Otvoriť príklad na novej záložke: začiarkavacie políčko with error message and hints on items
Code
Markup
<div class="govuk-form-group govuk-form-group--error">
<p id="waste-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Please select an option
</p>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste" name="waste" type="checkbox" value="animal" aria-describedby="waste-error waste-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="waste">
Waste from animal carcasses
<span class="idsk-required">*</span>
</label>
<div id="waste-item-hint" class="govuk-hint govuk-checkboxes__hint">
Nullam id dolor id nibh ultricies vehicula ut id elit.
</div>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines" aria-describedby="waste-error waste-2-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="waste-2">
Waste from mines or quarries
<span class="idsk-required">*</span>
</label>
<div id="waste-2-item-hint" class="govuk-hint govuk-checkboxes__hint">
Nullam id dolor id nibh ultricies vehicula ut id elit.
</div>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm" aria-describedby="waste-error waste-3-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="waste-3">
Farm or agricultural waste
<span class="idsk-required">*</span>
</label>
<div id="waste-3-item-hint" class="govuk-hint govuk-checkboxes__hint">
Nullam id dolor id nibh ultricies vehicula ut id elit.
</div>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "waste",
errorMessage: {
text: "Please select an option"
},
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."
}
}
]
}) }}Začiarkavacie políčko with very long option text
Otvoriť príklad na novej záložke: začiarkavacie políčko with very long option text
Code
Markup
<div class="govuk-form-group govuk-form-group--error">
<div id="waste-hint" class="govuk-hint">
Nullam id dolor id nibh ultricies vehicula ut id elit.
</div>
<p id="waste-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste" name="waste" type="checkbox" value="nullam" aria-describedby="waste-hint waste-error">
<label class="govuk-label govuk-checkboxes__label" for="waste">
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.
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="aenean" aria-describedby="waste-hint waste-error">
<label class="govuk-label govuk-checkboxes__label" for="waste-2">
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.
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="fusce" aria-describedby="waste-hint waste-error">
<label class="govuk-label govuk-checkboxes__label" for="waste-3">
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.
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "waste",
hint: {
text: "Nullam id dolor id nibh ultricies vehicula ut id elit."
},
errorMessage: {
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
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."
}
]
}) }}Začiarkavacie políčko with conditional items
Otvoriť príklad na novej záložke: začiarkavacie políčko with conditional items
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="how-contacted" name="with-conditional-items" type="checkbox" value="email" data-aria-controls="conditional-how-contacted">
<label class="govuk-label govuk-checkboxes__label" for="how-contacted">
Email
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted">
<label class="govuk-label" for="context-email">Email address</label>
<input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="how-contacted-2" name="with-conditional-items" type="checkbox" value="phone" data-aria-controls="conditional-how-contacted-2">
<label class="govuk-label govuk-checkboxes__label" for="how-contacted-2">
Phone
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-2">
<label class="govuk-label" for="contact-phone">Phone number</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="how-contacted-3" name="with-conditional-items" type="checkbox" value="text" data-aria-controls="conditional-how-contacted-3">
<label class="govuk-label govuk-checkboxes__label" for="how-contacted-3">
Text message
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-3">
<label class="govuk-label" for="contact-text-message">Mobile phone number</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "with-conditional-items",
idPrefix: "how-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'
}
}
]
}) }}Začiarkavacie políčko with conditional items with special characters
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="user.profile[contact-prefs]" name="contact-prefs" type="checkbox" value="email" data-aria-controls="conditional-user.profile[contact-prefs]">
<label class="govuk-label govuk-checkboxes__label" for="user.profile[contact-prefs]">
Email
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-user.profile[contact-prefs]">
<label class="govuk-label" for="context-email">Email address</label>
<input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="user.profile[contact-prefs]-2" name="contact-prefs" type="checkbox" value="phone" data-aria-controls="conditional-user.profile[contact-prefs]-2">
<label class="govuk-label govuk-checkboxes__label" for="user.profile[contact-prefs]-2">
Phone
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-user.profile[contact-prefs]-2">
<label class="govuk-label" for="contact-phone">Phone number</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="user.profile[contact-prefs]-3" name="contact-prefs" type="checkbox" value="text" data-aria-controls="conditional-user.profile[contact-prefs]-3">
<label class="govuk-label govuk-checkboxes__label" for="user.profile[contact-prefs]-3">
Text message
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-user.profile[contact-prefs]-3">
<label class="govuk-label" for="contact-text-message">Mobile phone number</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "contact-prefs",
idPrefix: "user.profile[contact-prefs]",
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'
}
}
]
}) }}Začiarkavacie políčko with conditional item checked
Otvoriť príklad na novej záložke: začiarkavacie políčko with conditional item checked
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="how-contacted-checked" name="how-contacted-checked" type="checkbox" value="email" checked data-aria-controls="conditional-how-contacted-checked">
<label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked">
Email
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional" id="conditional-how-contacted-checked">
<label class="govuk-label" for="context-email">Email address</label>
<input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="how-contacted-checked-2" name="how-contacted-checked" type="checkbox" value="phone" data-aria-controls="conditional-how-contacted-checked-2">
<label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked-2">
Phone
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-checked-2">
<label class="govuk-label" for="contact-phone">Phone number</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="how-contacted-checked-3" name="how-contacted-checked" type="checkbox" value="text" data-aria-controls="conditional-how-contacted-checked-3">
<label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked-3">
Text message
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-checked-3">
<label class="govuk-label" for="contact-text-message">Mobile phone number</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "how-contacted-checked",
idPrefix: "how-contacted-checked",
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'
}
}
]
}) }}Začiarkavacie políčko with optional form-group classes showing group error
Code
Markup
<div class="govuk-form-group govuk-form-group--error">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="how-contacted-checked" name="how-contacted-checked" type="checkbox" value="email" data-aria-controls="conditional-how-contacted-checked">
<label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked">
Email
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-checked">
<label class="govuk-label" for="context-email">Email address</label>
<input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="how-contacted-checked-2" name="how-contacted-checked" type="checkbox" value="phone" checked data-aria-controls="conditional-how-contacted-checked-2">
<label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked-2">
Phone
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional" id="conditional-how-contacted-checked-2">
<label class="govuk-label" for="contact-phone">Phone number</label>
<span id="contact-phone-error" class="govuk-error-message">Problem with input</span>
<input class="govuk-input govuk-input--error govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone" aria-describedby="contact-phone-error">
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="how-contacted-checked-3" name="how-contacted-checked" type="checkbox" value="text" data-aria-controls="conditional-how-contacted-checked-3">
<label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked-3">
Text message
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-checked-3">
<label class="govuk-label" for="contact-text-message">Mobile phone number</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "how-contacted-checked",
idPrefix: "how-contacted-checked",
formGroup: {
classes: "govuk-form-group--error"
},
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'
}
}
]
}) }}Začiarkavacie políčko small
Otvoriť príklad na novej záložke: začiarkavacie políčko small
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="a">
<label class="govuk-label govuk-checkboxes__label" for="nationality">
a thing
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="b">
<label class="govuk-label govuk-checkboxes__label" for="nationality-2">
another thing
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="c">
<label class="govuk-label govuk-checkboxes__label" for="nationality-3">
this thing
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
idPrefix: "nationality",
name: "nationality",
classes: "govuk-checkboxes--small",
items: [
{
value: "a",
text: "a thing"
},
{
value: "b",
text: "another thing"
},
{
value: "c",
text: "this thing"
}
]
}) }}Začiarkavacie políčko small with long text
Otvoriť príklad na novej záložke: začiarkavacie políčko small with long text
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="nullam">
<label class="govuk-label govuk-checkboxes__label" for="nationality">
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.
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="aenean">
<label class="govuk-label govuk-checkboxes__label" for="nationality-2">
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.
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="fusce">
<label class="govuk-label govuk-checkboxes__label" for="nationality-3">
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.
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
idPrefix: "nationality",
name: "nationality",
classes: "govuk-checkboxes--small",
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."
}
]
}) }}Začiarkavacie políčko small with error
Otvoriť príklad na novej záložke: začiarkavacie políčko small with error
Code
Markup
<div class="govuk-form-group govuk-form-group--error">
<p id="nationality-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Select a thing
</p>
<div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="a" aria-describedby="nationality-error">
<label class="govuk-label govuk-checkboxes__label" for="nationality">
a thing
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="b" aria-describedby="nationality-error">
<label class="govuk-label govuk-checkboxes__label" for="nationality-2">
another thing
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="c" aria-describedby="nationality-error">
<label class="govuk-label govuk-checkboxes__label" for="nationality-3">
this thing
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
idPrefix: "nationality",
name: "nationality",
classes: "govuk-checkboxes--small",
errorMessage: {
text: "Select a thing"
},
items: [
{
value: "a",
text: "a thing"
},
{
value: "b",
text: "another thing"
},
{
value: "c",
text: "this thing"
}
]
}) }}Začiarkavacie políčko small with hint
Otvoriť príklad na novej záložke: začiarkavacie políčko small with hint
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="a" aria-describedby="nationality-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="nationality">
a thing
<span class="idsk-required">*</span>
</label>
<div id="nationality-item-hint" class="govuk-hint govuk-checkboxes__hint">
hint for a thing
</div>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="b">
<label class="govuk-label govuk-checkboxes__label" for="nationality-2">
another thing
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="c">
<label class="govuk-label govuk-checkboxes__label" for="nationality-3">
this thing
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
idPrefix: "nationality",
name: "nationality",
classes: "govuk-checkboxes--small",
items: [
{
value: "a",
text: "a thing",
hint: {
text: "hint for a thing"
}
},
{
value: "b",
text: "another thing"
},
{
value: "c",
text: "this thing"
}
]
}) }}Začiarkavacie políčko small with disabled
Otvoriť príklad na novej záložke: začiarkavacie políčko small with disabled
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="a">
<label class="govuk-label govuk-checkboxes__label" for="nationality">
a thing
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="b">
<label class="govuk-label govuk-checkboxes__label" for="nationality-2">
another thing
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="c" disabled>
<label class="govuk-label govuk-checkboxes__label" for="nationality-3">
this thing
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
idPrefix: "nationality",
name: "nationality",
classes: "govuk-checkboxes--small",
items: [
{
value: "a",
text: "a thing"
},
{
value: "b",
text: "another thing"
},
{
value: "c",
text: "this thing",
disabled: true
}
]
}) }}Začiarkavacie políčko small with conditional reveal
Otvoriť príklad na novej záložke: začiarkavacie políčko small with conditional reveal
Code
Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="how-contacted" name="how-contacted" type="checkbox" value="a" data-aria-controls="conditional-how-contacted">
<label class="govuk-label govuk-checkboxes__label" for="how-contacted">
a thing
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted">
<label class="govuk-label" for="context-email">Foo</label>
<input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="how-contacted-2" name="how-contacted" type="checkbox" value="b">
<label class="govuk-label govuk-checkboxes__label" for="how-contacted-2">
another thing
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Macro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "how-contacted",
idPrefix: "how-contacted",
classes: "govuk-checkboxes--small",
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"
}
]
}) }}