1. Komponenty

Zaškrtávací pole

angl. Checkbox

Slouží pro výběr jedné, více, ale i žádné možnosti ze seznamu možností.

Zaškrtávací pole včetně umístění popisku


<div class="row">
    <div class="col-sm-6">
        <div class="form-group custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="custom-checkbox">
            <label for="custom-checkbox">Checkbox</label>
            <span class="custom-control-indicator"></span>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input is-invalid" id="custom-checkbox-2">
            <label for="custom-checkbox-2">Error checkbox</label>
            <span class="custom-control-indicator"></span>
            <span class="help-block">Chyba: Lorem ipsum dolor sit amet</span>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="custom-checkbox-3" disabled="">
            <label for="custom-checkbox-3">Disabled checkbox</label>
            <span class="custom-control-indicator"></span>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="custom-checkbox-4" readonly="">
            <label for="custom-checkbox-4">Readonly checkbox</label>
            <span class="custom-control-indicator"></span>
        </div>
    </div>
</div>

Použití

Zaškrtávací pole použijte v případě, že je možné vybrat jednu, více, ale také žádnou možnost ze seznamu možností. Pro výběr pouze jedné možnosti ze seznamu použijte Přepínače.

Zaškrtávací pole může být k dispozici také pouze jedno (bez možnosti výběru) - např. žádost o udělení souhlasu se zpracováním osobních údajů.

  • Zaškrtávací pole použijte ve formuláři nebo pro rozšířené hledání (např. u výsledků vyhledávání)
  • Pokud se jedná o souhlas nebo potvrzení, nechte pole ve výchozím stavu nezaškrtnuté (např. udělení souhlasu se zpracováním osobních údajů)

Nadpisy

U seznamu zaškrtávacích polí uveďte nadpis, kterým uživateli poskytnete celkový kontext čeho se začkrtávací seznam týká.

Nadpis u sady zaškrtávacích polí

Označení

Každé zaškrtávací pole má přiřazené výstižné označení, které:

  • umístěte vpravo od zaškrtávacího pole
  • je krátké, srozumitelné a výstižné

Dvojtečka za označení rozbalovacího seznamu nepatří

Klikatelná plocha

Uživatel by měl mít možnost zaškrtnout výběr nejen kliknutím přímo do zaškrtávacího okénka (může být problém se trefit), ale i kliknutím na označení zaškrtávacího pole.

Výchozí výběr

  • V případě použití ve formuláři je zaškrtávací pole nezaškrtnuté
  • Nezaškrtnutá pole jsou také tam, kde uživatel v rozšířeném hledání upřesňuje svůj výběr
  • Všechna pole jsou zaškrtnutá v případě, že chceme uživateli ukázat všechen obsah na stránce a dát mu možnost obsah si samostatně filtrovat (např. výsledky vyhledávání, aktuality).

Užitečné odkazy