Checkbox
Kedy použiť tento komponent
Komponent použite, keď užívateľ musí vybrať viac ako jednu možnosť.
Kedy nepoužiť tento komponent
Nepoužívajte komponent, ak používateľ môže zvoliť iba jednu možnosť.
V tomto prípade použite radio
Základný stav
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="odpad-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
Aké druhy odpadu pravidelne prepravujete?
</legend>
<span id="odpad-hint" class="govuk-hint">
Aké druhy odpadu pravidelne prepravujete? Označte možnosti, ktoré sa vás týkajú.
</span>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="odpad" name="odpad" type="checkbox" value="zivocisny">
<label class="govuk-label govuk-checkboxes__label" for="odpad">
Odpad živočíšneho charakteru
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="odpad-2" name="odpad" type="checkbox" value="bane a lomy">
<label class="govuk-label govuk-checkboxes__label" for="odpad-2">
Odpad z baní a lomov
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="odpad-3" name="odpad" type="checkbox" value="farma a hospodarstvo">
<label class="govuk-label govuk-checkboxes__label" for="odpad-3">
Odpad z fariem a hospodárstva
</label>
</div>
</div>
</fieldset>
</div>
S nápovedou
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="narodnost-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
Aká je Vaša národnosť?
</legend>
<span id="narodnost-hint" class="govuk-hint">
Označte všetky možnosti, ktoré sú pre Vás relevantné
</span>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="narodnost" name="narodnost" type="checkbox" value="anglicka" aria-describedby="narodnost-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="narodnost">
Anglická
</label>
<span id="narodnost-item-hint" class="govuk-hint govuk-checkboxes__hint">
Zahrňuje Anglickú, Škótsku a Írsku
</span>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="narodnost-2" name="narodnost" type="checkbox" value="irska">
<label class="govuk-label govuk-checkboxes__label" for="narodnost-2">
Írska
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="narodnost-3" name="narodnost" type="checkbox" value="ine">
<label class="govuk-label govuk-checkboxes__label" for="narodnost-3">
Iná
</label>
</div>
</div>
</fieldset>
</div>
Chybový stav
<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="narodnost-chybovy-hint narodnost-chybovy-error">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
Aká je Vaša národnosť?
</legend>
<span id="narodnost-chybovy-hint" class="govuk-hint">
Označte všetky možnosti, ktoré sú pre Vás relevantné
</span>
<span id="narodnost-chybovy-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span>
Toto pole je povinné
</span>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="narodnost-chybovy" name="narodnost-chybovy" type="checkbox" value="anglicka" aria-describedby="narodnost-chybovy-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="narodnost-chybovy">
Anglická
</label>
<span id="narodnost-chybovy-item-hint" class="govuk-hint govuk-checkboxes__hint">
Zahrňuje Anglickú, Škótsku a Írsku
</span>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="narodnost-chybovy-2" name="narodnost-chybovy" type="checkbox" value="irska">
<label class="govuk-label govuk-checkboxes__label" for="narodnost-chybovy-2">
Írska
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="narodnost-chybovy-3" name="narodnost-chybovy" type="checkbox" value="ine">
<label class="govuk-label govuk-checkboxes__label" for="narodnost-chybovy-3">
Iná
</label>
</div>
</div>
</fieldset>
</div>
Označený stav
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="odpad-oznaceny-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
Aké druhy odpadu pravidelne prepravujete?
</legend>
<span id="odpad-oznaceny-hint" class="govuk-hint">
Aké druhy odpadu pravidelne prepravujete? Označte možnosti, ktoré sa vás týkajú.
</span>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="odpad-oznaceny" name="odpad-oznaceny" type="checkbox" value="zivocisny" checked>
<label class="govuk-label govuk-checkboxes__label" for="odpad-oznaceny">
Odpad živočíšneho charakteru
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="odpad-oznaceny-2" name="odpad-oznaceny" type="checkbox" value="bane a lomy">
<label class="govuk-label govuk-checkboxes__label" for="odpad-oznaceny-2">
Odpad z baní a lomov
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="odpad-oznaceny-3" name="odpad-oznaceny" type="checkbox" value="farma a hospodarstvo">
<label class="govuk-label govuk-checkboxes__label" for="odpad-oznaceny-3">
Odpad z fariem a hospodárstva
</label>
</div>
</div>
</fieldset>
</div>
Neaktívny stav
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="odpad-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
Aké druhy odpadu pravidelne prepravujete?
</legend>
<span id="odpad-neaktivny-hint" class="govuk-hint">
Aké druhy odpadu pravidelne prepravujete? Označte možnosti, ktoré sa vás týkajú.
</span>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="odpad-disabled" name="odpad-disabled" type="checkbox" value="zivocisny" disabled>
<label class="govuk-label govuk-checkboxes__label" for="odpad-disabled">
Odpad živočíšneho charakteru
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="odpad-disabled-2" name="odpad-disabled" type="checkbox" value="bane a lomy" disabled>
<label class="govuk-label govuk-checkboxes__label" for="odpad-disabled-2">
Odpad z baní a lomov
</label>
</div>
</div>
</fieldset>
</div>
Podmienečný checkbox
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="kontakt-hint">
<legend class="govuk-fieldset__legend">
Ako vás máme kontaktovať?
</legend>
<span id="kontakt-hint" class="govuk-hint">
Vyberte možnosti, ktoré sú pre Vás vhodné
</span>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="kontakt" name="kontakt" type="checkbox" value="emailom" data-aria-controls="conditional-kontakt">
<label class="govuk-label govuk-checkboxes__label" for="kontakt">
E-mailom
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-kontakt">
<div class="govuk-form-group">
<label class="govuk-label" for="kontaktovanie-emailom">
E-mailová adresa
</label>
<input class="govuk-input govuk-!-width-one-third" id="kontaktovanie-emailom" name="kontaktovanie-emailom" type="email">
</div>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="kontakt-2" name="kontakt" type="checkbox" value="telefonicky" data-aria-controls="conditional-kontakt-2">
<label class="govuk-label govuk-checkboxes__label" for="kontakt-2">
Telefonicky
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-kontakt-2">
<div class="govuk-form-group">
<label class="govuk-label" for="kontaktovanie-telefonicky">
Telefónne číslo
</label>
<input class="govuk-input govuk-!-width-one-third" id="kontaktovanie-telefonicky" name="kontaktovanie-telefonicky" type="tel">
</div>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="kontakt-3" name="kontakt" type="checkbox" value="spravou" data-aria-controls="conditional-kontakt-3">
<label class="govuk-label govuk-checkboxes__label" for="kontakt-3">
Správou
</label>
</div>
<div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-kontakt-3">
<div class="govuk-form-group">
<label class="govuk-label" for="kontaktovanie-spravou">
Telefónne číslo
</label>
<input class="govuk-input govuk-!-width-one-third" id="kontaktovanie-spravou" name="kontaktovanie-spravou" type="tel">
</div>
</div>
</div>
</fieldset>
</div>