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>

Responzivní (RWD) zobrazení

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech).

Pro představu, jak se má komponenta chovat na jiném zařízení, lze náhled komponenty zmenšit podle potřeby. Ke zmenšení dojde stisknutím pravého okraje a potáhnutím doleva. Komponenta se automaticky přeskládá podle míry zmenšení.

Více o typech zařízení najdete na stránce Mřížka.

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).

Responzivní (RWD) zobrazení

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech).

Pro představu, jak se má komponenta chovat na jiném zařízení, lze náhled komponenty zmenšit podle potřeby. Ke zmenšení dojde stisknutím pravého okraje a potáhnutím doleva. Komponenta se automaticky přeskládá podle míry zmenšení.

Více o typech zařízení najdete na stránce Mřížka.

Užitečné odkazy