1. Komponenty

Přepínač

angl. Radio Button

Slouží pro výběr pouze jedné možnosti ze seznamu možností.

Přepínač včetně umístění popisku


<div class="row">
    <div class="col-sm-6">
        <div class="form-group custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="custom-radio">
            <label for="custom-radio">Radio</label>
            <span class="custom-control-indicator"></span>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group form-group custom-control custom-radio">
            <input type="radio" class="custom-control-input is-invalid" id="custom-radio-2">
            <label for="custom-radio-2">Error radio</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-radio">
            <input type="radio" class="custom-control-input" id="custom-radio-3" disabled="">
            <label for="custom-radio-3">Disabled radio</label>
            <span class="custom-control-indicator"></span>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="custom-radio-4" readonly="">
            <label for="custom-radio-4">Readonly radio</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í

Přepínač použijte pro seznam dvou a více možností, které se vzájemně vylučují. Uveďte jasně přesně danou akci, která bude následovat v případě, že uživatel daný přepínač vybere. Pokud může uživatel vybrat více než jednu možnost, použijte Zaškrtávací pole

  • Uživatel může vybrat vždy pouze jednu možnost
  • Jednotlivé možnosti zarovnávejte pod sebe
  • Používejte pouze tam, kde existuje výběr alespoň ze dvou možností
  • Pro výběr pouze jedné možnosti (např. souhlas se zpracováním osobních údajů) použijte vždy zaškrtávací pole

Nadpisy

U skupiny přepínačů uveďte nadpis, kterým uživateli poskytnete celkový kontext čeho se skupina přepínačů týká.

Označení

Každý přepínač má přiřazené stručné označení, které je:

  • krátké, srozumitelné a výstižné
  • umístěné vpravo od přepínače

Dvojtečka za označení nepatří.

Pro další vysvětlení používejte text nápovědy pod označením.

Užitečné odkazy