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>

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