1. Komponenty

Rozbalovací seznam

angl. Selectbox

Slouží k výběru ze seznamu případně pro filtraci obsahu.

Pro použití výhradně ve formuláři


<div class="form-group">
    <div class="select select--primary">
        <select>
            <option hidden="">Vyberte ze seznamu</option>
            <option>Option 1 lorem ipsum</option>
            <option>Option 2 dolor</option>
            <option>Option 3 sit amet</option>
        </select>
    </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í

Rozbalovací seznam použijte, pokud má uživatel vybrat jednu možnost z delšího seznamu (7 a více možností). Pokud je výběr možností menší, použijte Přepínače nebo Zaškrtávací pole.

Označení (Label)

Každý rozbalovací seznam má přiřazené výstižné označení, které:

  • umístěte ideálně nad daným rozbalovacím seznamem, případně nalevo od seznamu (zarovnané na levý prapor)
  • je krátké, srozumitelné a výstižné

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

Možnosti v seznamu

  • U každé možnosti dodržte délku pouze na jeden řádek (tomu uzpůsobte i velikost samotné komponenty)
  • V seznamu nepoužívejte obrázky ani ikony
  • Možnosti řaďte podle četnosti používání (lze zvolit abecední řazení)

Validace

Validace v reálném čase usnadní uživateli vyplňování formuláře. Pro kompletní pokyny jak přistupovat k validací navštivte stránku Formulář.

Přístupnost

Z důvodu přístupnosti musí být komponenta plně ovladatelná pomocí myši i klávesnice. Rozbalovací seznamy nestylujte (neupravujte pomocí CSS). Ideálně se řiďte standardy typu WCAG 2.0 standardů - tento např. nařizuje ovládání prvku pomocí klávesnice (CSS alternativa pro select tento standard porušuje).

Způsob ovládání:

Pseudotřída CSS Myš Klávesnice
:hover Namiřte kurzor na komponentu rozbalovacího seznamu Použijte tab pro vybrání komponenty
:focus Klikněte na komponentu rozbalovacího seznamu Stiskněte enter
: Namiřte kurzor na vybranou položku ze seznamu Použijte šipky nahoru / dolů na klávesnici
:select Klikněte na vybranou položku ze seznamu Stiskněte enter

Užitečné odkazy