1. Komponenty

Vypínač

angl. Toggle

Slouží k vypnutí/zapnutí funkce.

Ukázka použití vypínače


<div class="col-md-9">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group custom-control custom-toggle">
                <input type="checkbox" class="custom-control-input" id="custom-toggle">
                <label for="custom-toggle">Toggle</label>
                <span class="custom-control-indicator"></span>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group custom-control custom-toggle">
                <input type="checkbox" class="custom-control-input is-invalid" id="custom-toggle-2">
                <label for="custom-toggle-2">Error toggle</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-toggle">
                <input type="checkbox" class="custom-control-input" id="custom-toggle-3" disabled="disabled">
                <label for="custom-toggle-3">Disabled toggle</label>
                <span class="custom-control-indicator"></span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group custom-control custom-toggle">
                <input type="checkbox" class="custom-control-input" id="custom-toggle-4" disabled="disabled" checked="checked">
                <label for="custom-toggle-4">Disabled toggle</label>
                <span class="custom-control-indicator"></span>
            </div>
        </div>
    </div>
</div>

Použití

Vypínač nemusí být použitý jen ve formuláři. Často se používá v nastavení aplikací. Například pro vypnutí/zapnutí funkce notifikací.

Ukázka použití vypínače

Ukázka použití vypínače

Vypínač vybízí uživatele k výběru dvou, vzájemně se vylučujících, voleb (on/off). Vypínač má poskytovat uživateli okamžitou zpětnou vazbu, která mu umožní svobodně ovládat jeho preference podle potřeby.

Použití vypínače bývá často zaměňováno s dalšími formulářovými prvky. Podrobnější popis, jak tyto prvky používat, najdete na stránce Formuláře.

Volba, kterou uživatel provede prostřednictvím vypínače se projevuje okamžitě, bez nutnosti odeslat formulář prostřednictvím tlačítka.

Nadpis

Nadpis musí být výstižný. Měl by uživateli podat další informace o akci, která bude v případě změny (on/off) následovat.

Užitečné odkazy