Checkboxes - Začiarkavacie políčko
Začiarkavacie políčko
Zdrojový kód
HTML
<div class="govuk-form-group">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="národnosť" name="národnosť" type="checkbox" value="british">
<label class="govuk-label govuk-checkboxes__label" for="národnosť">
Britská
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="národnosť-2" name="národnosť" type="checkbox" value="irish">
<label class="govuk-label govuk-checkboxes__label" for="národnosť-2">
Írska
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="národnosť-3" name="národnosť" type="checkbox" value="other">
<label class="govuk-label govuk-checkboxes__label" for="národnosť-3">
Občan inej krajiny
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "národnosť",
items: [
{
value: "british",
text: "Britská"
},
{
value: "irish",
text: "Írska"
},
{
value: "other",
text: "Občan inej krajiny"
}
]
}) }}Začiarkavacie políčko s prednastavenou hodnotou
Otvoriť príklad na novej záložke: začiarkavacie políčko s prednastavenou hodnotou
Zdrojový kód
HTML
<div class="govuk-form-group">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="národnosť" name="národnosť" type="checkbox" value="british" checked>
<label class="govuk-label govuk-checkboxes__label" for="národnosť">
Britská
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="národnosť-2" name="národnosť" type="checkbox" value="irish">
<label class="govuk-label govuk-checkboxes__label" for="národnosť-2">
Írska
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="národnosť-3" name="národnosť" type="checkbox" value="other" checked data-aria-controls="conditional-národnosť-3">
<label class="govuk-label govuk-checkboxes__label" for="národnosť-3">
Občan inej krajiny
<span class="idsk-required">*</span>
</label>
</div>
<div class="govuk-checkboxes__conditional" id="conditional-národnosť-3">
<div class="govuk-form-group">
<label class="govuk-label" for="other-country">
Krajina
</label>
<input class="govuk-input" id="other-country" name="other-country" type="text" value="Ravka">
</div>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "národnosť",
items: [
{
value: "british",
text: "Britská"
},
{
value: "irish",
text: "Írska"
},
{
value: "other",
text: "Občan inej krajiny",
conditional: {
html:
'<div class="govuk-form-group">\n' +
' <label class="govuk-label" for="other-country">\n' +
" Krajina\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 s oddeľovačom a žiadnym výberom
Otvoriť príklad na novej záložke: začiarkavacie políčko s oddeľovačom a žiadnym výberom
Zdrojový kód
HTML
<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">
Zvierací odpad
<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">
Vojenský odpad
<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">
Odpad z fariem
<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">
Źiadne z uvedených
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "with-divider-and-none",
items: [
{
value: "animal",
text: "Zvierací odpad"
},
{
value: "mines",
text: "Vojenský odpad"
},
{
value: "farm",
text: "Odpad z fariem"
},
{
divider: "or"
},
{
value: "none",
text: "Źiadne z uvedených",
behaviour: "exclusive"
}
]
}) }}Začiarkavacie políčko s oddeľovačom, žiadnym výberom a podmienenými hodnotami
Zdrojový kód
HTML
<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">
Bezbariérové toalety
<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">
Služba s prekladom Braillovho písma
<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">
Parkovanie pre zdravotne postihnutých
<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">
Iné požiadavky
<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">Iné požiadavky</label>
<textarea class="govuk-textarea govuk-!-width-one-third" name="other-access-needs" id="other-access-needs"></textarea>
</div>
<div class="govuk-checkboxes__divider">oddelovač</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">
Žiadne z uvedených
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "with-divider-and-none-and-conditional-items",
items: [
{
value: "accessible-toilets",
text: "Bezbariérové toalety"
},
{
value: "braille",
text: "Služba s prekladom Braillovho písma"
},
{
value: "disabled-car-parking",
text: "Parkovanie pre zdravotne postihnutých"
},
{
value: "another-access-need",
text: "Iné požiadavky",
conditional: {
html:
'<label class="govuk-label" for="other-access-needs">Iné požiadavky</label>\n' +
'<textarea class="govuk-textarea govuk-!-width-one-third" name="other-access-needs" id="other-access-needs"></textarea>\n'
}
},
{
divider: "oddelovač"
},
{
value: "none",
text: "Žiadne z uvedených",
behaviour: "exclusive"
}
]
}) }}Začiarkavacie políčko s atribútami "id" a "name"
Zdrojový kód
HTML
<div class="govuk-form-group">
<div id="with-id-and-name-hint" class="govuk-hint">
Ak máte dvojité občianstvo, vyberte všetky možnosti, ktoré sú pre vás relevantné.
</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">
Britská
<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">
Írska
<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">
Škótska
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "with-id-and-name",
hint: {
text: "Ak máte dvojité občianstvo, vyberte všetky možnosti, ktoré sú pre vás relevantné."
},
items: [
{
name: "british",
id: "item_british",
value: "yes",
text: "Britská"
},
{
name: "irish",
id: "item_irish",
value: "irish",
text: "Írska"
},
{
name: "custom-name-scottish",
text: "Škótska",
value: "scottish"
}
]
}) }}Začiarkavacie políčko s nápovedou na položkách
Otvoriť príklad na novej záložke: začiarkavacie políčko s nápovedou na položkách
Zdrojový kód
HTML
<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">
Prihlásiť sa cez vládny portál (Government Gateway)
<span class="idsk-required">*</span>
</label>
<div id="government-gateway-item-hint" class="govuk-hint govuk-checkboxes__hint">
Máte používateľské ID, ak ste sa už zaregistrovali na podanie daňového priznania online alebo ste už podali daňové priznanie.
</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">
Prihlásiť sa cez GOV.UK Verify
<span class="idsk-required">*</span>
</label>
<div id="govuk-verify-item-hint" class="govuk-hint govuk-checkboxes__hint">
Máte účet, ak ste už overili svoju totožnosť cez Barclays, CitizenSafe, Digidentity, Experian, Slovenskú poštu, Royal Mail alebo SecureIdentity.
</div>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "with-hints-on-items",
items: [
{
name: "gateway",
id: "government-gateway",
value: "gov-gateway",
text: "Prihlásiť sa cez vládny portál (Government Gateway)",
hint: {
text: "Máte používateľské ID, ak ste sa už zaregistrovali na podanie daňového priznania online alebo ste už podali daňové priznanie."
}
},
{
name: "verify",
id: "govuk-verify",
value: "gov-verify",
text: "Prihlásiť sa cez GOV.UK Verify",
hint: {
text: "Máte účet, ak ste už overili svoju totožnosť cez Barclays, CitizenSafe, Digidentity, Experian, Slovenskú poštu, Royal Mail alebo SecureIdentity."
}
}
]
}) }}Začiarkavacie políčko so zneplatnenými položkami
Otvoriť príklad na novej záložke: začiarkavacie políčko so zneplatnenými položkami
Zdrojový kód
HTML
<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">
Prihlásiť sa cez vládny portál (Government Gateway)
<span class="idsk-required">*</span>
</label>
<div id="government-gateway-item-hint" class="govuk-hint govuk-checkboxes__hint">
Máte používateľské ID, ak ste sa už zaregistrovali na podanie daňového priznania online alebo ste už podali daňové priznanie.
</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">
Prihlásiť sa cez GOV.UK Verify
<span class="idsk-required">*</span>
</label>
<div id="govuk-verify-item-hint" class="govuk-hint govuk-checkboxes__hint">
Máte účet, ak ste už overili svoju totožnosť cez Barclays, CitizenSafe, Digidentity, Experian, Slovenskú poštu, Royal Mail alebo SecureIdentity.
</div>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "sign-in",
items: [
{
name: "gateway",
id: "government-gateway",
value: "gov-gateway",
text: "Prihlásiť sa cez vládny portál (Government Gateway)",
hint: {
text: "Máte používateľské ID, ak ste sa už zaregistrovali na podanie daňového priznania online alebo ste už podali daňové priznanie."
}
},
{
name: "verify",
id: "govuk-verify",
value: "gov-verify",
text: "Prihlásiť sa cez GOV.UK Verify",
hint: {
text: "Máte účet, ak ste už overili svoju totožnosť cez Barclays, CitizenSafe, Digidentity, Experian, Slovenskú poštu, Royal Mail alebo SecureIdentity."
},
disabled: true
}
]
}) }}Začiarkavacie políčko s legendou v nadpise
Otvoriť príklad na novej záložke: začiarkavacie políčko s legendou v nadpise
Zdrojový kód
HTML
<div class="govuk-form-group">
<div id="waste-hint" class="govuk-hint">
Vyberte všetky vyhovujúce
</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">
Zvierací odpad
<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">
Vojenský odpad
<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">
Odpad z fariem
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "waste",
hint: {
text: "Vyberte všetky vyhovujúce"
},
items: [
{
value: "animal",
text: "Zvierací odpad"
},
{
value: "mines",
text: "Vojenský odpad"
},
{
value: "farm",
text: "Odpad z fariem"
}
]
}) }}Začiarkavacie políčko s podlegendou
Otvoriť príklad na novej záložke: začiarkavacie políčko s podlegendou
Zdrojový kód
HTML
<div class="govuk-form-group govuk-form-group--error">
<div id="waste-hint" class="govuk-hint">
Vyberte všetky vyhovujúce
</div>
<p id="waste-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Vyberte si všetky typy odpadu ktoré transportujete
</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">
Zvierací odpad
<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">
Vojenský odpad
<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">
Odpad z fariem
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "waste",
hint: {
text: "Vyberte všetky vyhovujúce"
},
errorMessage: {
text: "Vyberte si všetky typy odpadu ktoré transportujete"
},
items: [
{
value: "animal",
text: "Zvierací odpad"
},
{
value: "mines",
text: "Vojenský odpad"
},
{
value: "farm",
text: "Odpad z fariem"
}
]
}) }}Začiarkavacie políčko bez popisu
Otvoriť príklad na novej záložke: začiarkavacie políčko bez popisu
Zdrojový kód
HTML
<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">
Červená
<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">
Zelená
<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">
Modrá
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "colours",
items: [
{
value: "red",
text: "Červená"
},
{
value: "green",
text: "Zelená"
},
{
value: "blue",
text: "Modrá"
}
]
}) }}Začiarkavacie políčko s použitím 'aria-describedby' html elementu
Zdrojový kód
HTML
<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> Potvrdenie súhlasu s podmienkami používania
</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">
Súhlasím s podmienkami používania
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "t-and-c",
errorMessage: {
text: "Potvrdenie súhlasu s podmienkami používania"
},
items: [
{
value: "yes",
text: "Súhlasím s podmienkami používania"
}
]
}) }}Začiarkavacie políčko jedna možnosť s použitím nápovedy a html elementu 'aria-describedby'
Zdrojový kód
HTML
<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> Potvrdenie súhlasu s podmienkami používania
</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">
Súhlasím s podmienkami používania
<span class="idsk-required">*</span>
</label>
<div id="t-and-c-with-hint-item-hint" class="govuk-hint govuk-checkboxes__hint">
Poďme do toho, všetko mi je jasné!
</div>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "t-and-c-with-hint",
errorMessage: {
text: "Potvrdenie súhlasu s podmienkami používania"
},
items: [
{
value: "yes",
text: "Súhlasím s podmienkami používania",
hint: {
text: "Poďme do toho, všetko mi je jasné!"
}
}
]
}) }}Začiarkavacie políčko so zoskupením položiek a chybovou hláškou
Otvoriť príklad na novej záložke: začiarkavacie políčko so zoskupením položiek a chybovou hláškou
Zdrojový kód
HTML
<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="Výber národnosti nationality-error">
<p id="nationality-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Musíte súhlasiť s podmienkami použivania
</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">
<label class="govuk-label govuk-checkboxes__label" for="nationality">
Britská
<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">
Írska
<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">
Občan inej krajiny
<span class="idsk-required">*</span>
</label>
</div>
</div>
</fieldset>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "nationality",
errorMessage: {
text: "Musíte súhlasiť s podmienkami použivania"
},
items: [
{
value: "british",
text: "Britská"
},
{
value: "irish",
text: "Írska"
},
{
value: "other",
text: "Občan inej krajiny"
}
],
fieldset: {
describedBy: "Výber národnosti"
}
}) }}Začiarkavacie políčko s chybovou hláškou
Otvoriť príklad na novej záložke: začiarkavacie políčko s chybovou hláškou
Zdrojový kód
HTML
<div class="govuk-form-group govuk-form-group--error">
<p id="waste-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Prosím vyberte možnosť
</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">
Zvierací odpad
<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">
Vojenský odpad
<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">
Odpad z fariem
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "waste",
errorMessage: {
text: "Prosím vyberte možnosť"
},
items: [
{
value: "animal",
text: "Zvierací odpad"
},
{
value: "mines",
text: "Vojenský odpad"
},
{
value: "farm",
text: "Odpad z fariem"
}
]
}) }}Začiarkavacie políčko s chybovou hláškou a popisom položiek
Otvoriť príklad na novej záložke: začiarkavacie políčko s chybovou hláškou a popisom položiek
Zdrojový kód
HTML
<div class="govuk-form-group govuk-form-group--error">
<p id="waste-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Vyberte si z možností
</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">
Zvierací odpad
<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">
Vojenský odpad
<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">
Odpad z fariem
<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>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "waste",
errorMessage: {
text: "Vyberte si z možností"
},
items: [
{
value: "animal",
text: "Zvierací odpad",
hint: {
text: "Nullam id dolor id nibh ultricies vehicula ut id elit."
}
},
{
value: "mines",
text: "Vojenský odpad",
hint: {
text: "Nullam id dolor id nibh ultricies vehicula ut id elit."
}
},
{
value: "farm",
text: "Odpad z fariem",
hint: {
text: "Nullam id dolor id nibh ultricies vehicula ut id elit."
}
}
]
}) }}Začiarkavacie políčko s veľmi dlhým popisom
Otvoriť príklad na novej záložke: začiarkavacie políčko s veľmi dlhým popisom
Zdrojový kód
HTML
<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>
Makro
{% 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 s podmienenými položkami
Otvoriť príklad na novej záložke: začiarkavacie políčko s podmienenými položkami
Zdrojový kód
HTML
<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 adresa</label>
<input class="govuk-input govuk-!-width-one-third" name="context-email" type="email" 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">
Telefón
<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">Telefónne číslo</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="tel" 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">
SMS správa
<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">Mobilné telefónne číslo</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="tel" id="contact-text-message">
</div>
</div>
</div>
Makro
{% 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 adresa</label>\n' +
'<input class="govuk-input govuk-!-width-one-third" name="context-email" type="email" id="context-email">\n'
}
},
{
value: "phone",
text: "Telefón",
conditional: {
html:
'<label class="govuk-label" for="contact-phone">Telefónne číslo</label>\n' +
'<input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="tel" id="contact-phone">\n'
}
},
{
value: "text",
text: "SMS správa",
conditional: {
html:
'<label class="govuk-label" for="contact-text-message">Mobilné telefónne číslo</label>\n' +
'<input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="tel" id="contact-text-message">\n'
}
}
]
}) }}Začiarkavacie políčko s podmienenými vybranými položkami
Otvoriť príklad na novej záložke: začiarkavacie políčko s podmienenými vybranými položkami
Zdrojový kód
HTML
<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 adresa</label>
<input class="govuk-input govuk-!-width-one-third" name="context-email" type="email" 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">
Telefón
<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">Telefónne číslo</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="tel" 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">
SMS správa
<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">Mobilné telefónne číslo</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="tel" id="contact-text-message">
</div>
</div>
</div>
Makro
{% 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 adresa</label>\n' +
'<input class="govuk-input govuk-!-width-one-third" name="context-email" type="email" id="context-email">\n'
}
},
{
value: "phone",
text: "Telefón",
conditional: {
html:
'<label class="govuk-label" for="contact-phone">Telefónne číslo</label>\n' +
'<input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="tel" id="contact-phone">\n'
}
},
{
value: "text",
text: "SMS správa",
conditional: {
html:
'<label class="govuk-label" for="contact-text-message">Mobilné telefónne číslo</label>\n' +
'<input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="tel" id="contact-text-message">\n'
}
}
]
}) }}Začiarkavacie políčko s nepovinným štýlom skupiny a chybnou položkou
Zdrojový kód
HTML
<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 adresa</label>
<input class="govuk-input govuk-!-width-one-third" name="context-email" type="email" 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">
Telefón
<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">Telefónne číslo</label>
<span id="contact-phone-error" class="govuk-error-message">Zadajte telefónne číslo v tvare 090123456</span>
<input class="govuk-input govuk-input--error govuk-!-width-one-third" name="contact-phone" type="tel" 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">
SMS správa
<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">Mobilné telefónne číslo</label>
<input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="tel" id="contact-text-message">
</div>
</div>
</div>
Makro
{% 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 adresa</label>\n' +
'<input class="govuk-input govuk-!-width-one-third" name="context-email" type="email" id="context-email">\n'
}
},
{
value: "phone",
text: "Telefón",
checked: true,
conditional: {
html:
'<label class="govuk-label" for="contact-phone">Telefónne číslo</label>\n' +
'<span id="contact-phone-error" class="govuk-error-message">Zadajte telefónne číslo v tvare 090123456</span>\n' +
'<input class="govuk-input govuk-input--error govuk-!-width-one-third" name="contact-phone" type="tel" id="contact-phone" aria-describedby="contact-phone-error">\n'
}
},
{
value: "text",
text: "SMS správa",
conditional: {
html:
'<label class="govuk-label" for="contact-text-message">Mobilné telefónne číslo</label>\n' +
'<input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="tel" id="contact-text-message">\n'
}
}
]
}) }}Začiarkavacie políčko malé
Otvoriť príklad na novej záložke: začiarkavacie políčko malé
Zdrojový kód
HTML
<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">
položka A
<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">
ďalšia položka
<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">
táto položka
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
idPrefix: "nationality",
name: "nationality",
classes: "govuk-checkboxes--small",
items: [
{
value: "a",
text: "položka A"
},
{
value: "b",
text: "ďalšia položka"
},
{
value: "c",
text: "táto položka"
}
]
}) }}Začiarkavacie políčko malé s dlhým textom
Otvoriť príklad na novej záložke: začiarkavacie políčko malé s dlhým textom
Zdrojový kód
HTML
<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>
Makro
{% 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 malé s chybovou hláškou
Otvoriť príklad na novej záložke: začiarkavacie políčko malé s chybovou hláškou
Zdrojový kód
HTML
<div class="govuk-form-group govuk-form-group--error">
<p id="nationality-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Vyber položku
</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">
položka A
<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">
ďalšia položka
<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">
táto položka
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
idPrefix: "nationality",
name: "nationality",
classes: "govuk-checkboxes--small",
errorMessage: {
text: "Vyber položku"
},
items: [
{
value: "a",
text: "položka A"
},
{
value: "b",
text: "ďalšia položka"
},
{
value: "c",
text: "táto položka"
}
]
}) }}Začiarkavacie políčko malé s nápovedou
Otvoriť príklad na novej záložke: začiarkavacie políčko malé s nápovedou
Zdrojový kód
HTML
<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">
položka A
<span class="idsk-required">*</span>
</label>
<div id="nationality-item-hint" class="govuk-hint govuk-checkboxes__hint">
nápoveda k položke A
</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">
ďalšia položka
<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">
táto položka
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
idPrefix: "nationality",
name: "nationality",
classes: "govuk-checkboxes--small",
items: [
{
value: "a",
text: "položka A",
hint: {
text: "nápoveda k položke A"
}
},
{
value: "b",
text: "ďalšia položka"
},
{
value: "c",
text: "táto položka"
}
]
}) }}Začiarkavacie políčko malé zneplatnené
Otvoriť príklad na novej záložke: začiarkavacie políčko malé zneplatnené
Zdrojový kód
HTML
<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">
položka A
<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">
ďalšia položka
<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">
táto položka
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
idPrefix: "nationality",
name: "nationality",
classes: "govuk-checkboxes--small",
items: [
{
value: "a",
text: "položka A"
},
{
value: "b",
text: "ďalšia položka"
},
{
value: "c",
text: "táto položka",
disabled: true
}
]
}) }}Začiarkavacie políčko malé s rozklikávacou položkou
Otvoriť príklad na novej záložke: začiarkavacie políčko malé s rozklikávacou položkou
Zdrojový kód
HTML
<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">
položka A
<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 adresa</label>
<input class="govuk-input govuk-!-width-one-third" name="context-email" type="email" 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">
ďalšia položka
<span class="idsk-required">*</span>
</label>
</div>
</div>
</div>
Makro
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "how-contacted",
idPrefix: "how-contacted",
classes: "govuk-checkboxes--small",
items: [
{
value: "a",
text: "položka A",
conditional: {
html:
'<label class="govuk-label" for="context-email">Email adresa</label>\n' +
'<input class="govuk-input govuk-!-width-one-third" name="context-email" type="email" id="context-email">\n'
}
},
{
value: "b",
text: "ďalšia položka"
}
]
}) }}