Rozbaľovacie pole (Select)
Rozbaľovacie pole je interaktívny prvok, ktorý umožňuje používateľovi vybrať jednu možnosť z ponuky dostupných hodnôt. Po kliknutí na pole používateľ otvorí zoznam možností (rozbaľovací zoznam) a z neho zvolí požadovanú položku. Vybraná možnosť sa následne zobrazí v základnom (zatvorenom) stave poľa.
Použitie rozbaľovacieho poľa
Rozbaľovacie pole (select) slúži na výber jednej hodnoty zo zoznamu možností v rámci formulára. Používateľ po kliknutí otvorí zoznam a vyberie požadovanú položku; následne pole zobrazí vybranú hodnotu v zatvorenom stave. Select je vhodný najmä v situáciách, keď potrebujete šetriť priestor alebo keď zoznam obsahuje viacero možností. Funguje aj bez JavaScriptu, čo z neho robí spoľahlivý natívny formulárový prvok.
Ako sa používa
- Zoznam obsahuje 5 až 20 vzájomne sa vylučujúcich možností.
- Položky sú logicky zoradené (napr. abecedne, chronologicky alebo od najčastejšej voľby).
- Rozbaľovací zoznam neprekáža inému dôležitému obsahu.
- Použite s overením v reálnom čase.
- Používajte s krátkymi textami možností, ktoré nepresahujú jeden riadok.
Ako sa nepoužíva
- Ak je možností príliš málo (menej ako 5) – použite Prepínacie pole.
- Ak je možností extrémne veľa – použite prvok s našepkávačom a vyhľadávaním (listbox alebo combobox).
- Ak potrebujete vybrať viac ako jednu položku naraz - použite Začiarkavacie políčka.
- Ak výber zmení kontext stránky (napr. funguje ako navigácia).
Varianty a stavy rozbaľovacieho poľa
Rozbaľovacie pole môže byť zobrazené v základnom, povinnom, nepovinnom, chybovom alebo neaktívnom stave. Podporuje aj predvolenú hodnotu, neaktívne položky a riadený stav.
1. Základný stav
2. Povinné pole
3. Nepovinné pole
4. Pole s pomocným textom
5. Chybový stav
6. Chybový stav s pomocným textom
7. Neaktívny stav
8. Vybraná hodnota
9. Malý variant
10. Vybraná hodnota v malom variante
11. Zoznam s neaktívnou položkou
12. Riadený stav
Vybraná hodnota: (žiadna)
Prístupnosť (Accessibility)
Komponent je v súlade s normami WCAG 2.2 AA. Komponent spĺňa požiadavky na kontrastné pomery a jeho súčasťou sú interakcie s klávesnicou a čítačkami obrazovky.
Klávesové ovládanie
Rozbaľovacie pole má plnú podporu natívneho klávesnicového ovládania:
Tab/Shift + Tab– presun zamerania na rozbaľovacie pole alebo z neho na predchádzajúci/nasledujúci prvok.Medzerník,EnteraleboAlt + Šípka dole– otvorí zatvorené rozbaľovacie pole.Šípka hore/Šípka dole– v otvorenom zozname presúva zvýraznenie medzi možnosťami. V zatvorenom stave otvorí zoznam.PageUp/PageDown– presunie zvýraznenie o viac možností naraz.Home/End– presunie zvýraznenie na prvú alebo poslednú dostupnú možnosť v zozname.EnteraleboMedzerník– potvrdí zvýraznenú možnosť a zatvorí rozbaľovací zoznam.Esc– zbalí rozbaľovací zoznam bez zmeny aktuálneho výberu.- Zadávanie textu – stlačenie písmena alebo krátkej postupnosti písmen presunie zvýraznenie na možnosť začínajúcu zadaným textom.
- Klik mimo komponentu – zatvorí otvorený zoznam bez zmeny aktuálneho výberu.
- Neaktívne možnosti – pri pohybe klávesnicou sa preskakujú a nie je možné ich vybrať.
Základné pravidlá prístupnosti
- Ak používate natívne rozbaľovacie pole, použite prvky
<select>a<option>. Ak používate vlastný komponent, musí poskytovať rovnakú funkčnosť a porovnateľnú podporu klávesnice a asistenčných technológií. - Každé rozbaľovacie pole musí mať jasný, programovo asociovaný popis cez značku
<label>alebo ekvivalentné prepojenie pomocou ARIA atribútov. Nikdy nenahrádzajte skutočný label iba predvolenou hodnotou v zozname, napríklad textom „Vyberte si...“. - Predvolená hodnota alebo placeholder má používateľovi iba pomôcť pochopiť očakávaný výber. Nesmie nahrádzať label a nemá byť použitý ako jediný popis poľa.
- Vyhnite sa automatickému odosielaniu. Nepoužívajte zmenu výberu na okamžité odoslanie formulára alebo navigáciu bez jasného potvrdenia používateľom. Pri formulároch vždy poskytnite samostatné potvrdzovacie tlačidlo.
- Ak výber v rozbaľovacom poli mení obsah stránky alebo dostupné možnosti v inom poli, zmenu jasne oznámte a zachovajte predvídateľné poradie ovládania. Závislé polia používajte iba vtedy, keď sú pre používateľa zrozumiteľné.
- Pri zbere neovplyvnených dát, napríklad v dotazníkoch, sa vyhnite predvyplneniu konkrétnej hodnoty, ak by mohla ovplyvniť odpoveď. Použite neutrálny placeholder, napríklad Vyberte možnosť.
- Zabezpečte jasne viditeľný stav zamerania pre zatvorený ovládací prvok aj pre zvýraznenú položku v otvorenom zozname.
- Prípadný doplňujúci text prepojte na ovládací prvok cez atribút
aria-describedby. V prípade povinného poľa použite natívny atribútrequiredpri natívnom prvku aleboaria-required="true"pri vlastnom komponente. - Pri vlastnom rozbaľovacom poli zabezpečte správne stavy ako
aria-expanded,aria-controls,aria-activedescendantaaria-selected, ak sú pre daný vzor použité. - Ak je zoznam rozsiahly, zvážte zoskupenie súvisiacich možností. Pri natívnom prvku použite
<optgroup label="Názov skupiny">. Pri vlastnom komponente zabezpečte, aby boli skupiny zrozumiteľné vizuálne aj pre asistenčné technológie. - Ak pole požaduje bežné údaje, napríklad krajinu v adrese, použite pri natívnom prvku atribút
autocomplete, napríkladautocomplete="country". Pri vlastnom komponente zvážte, či je vhodnejší natívny prvok alebo samostatné textové pole s našepkávaním. - Nepoužívajte vizuálne oddeľovače ako náhradu za významové zoskupenie možností. Ak potrebujete oddeliť skupiny položiek, použite skutočné skupiny alebo zrozumiteľné skupinové nadpisy.
Implementácia rozbaľovacieho poľa z ID-SK Frontend
Komponenty z knižnice ID-SK Frontend môžete do svojho projektu integrovať dvoma spôsobmi v závislosti od vašej technologickej infraštruktúry:
- Statická HTML implementácia – vhodná pre projekty bez Node.js alebo bundlera.
- Pokročilá integrácia (NPM + SCSS + JS) – vhodná pre projekty so správou zdrojov a build procesom.
Základné požiadavky
Pred začiatkom integrácie sa uistite, že máte:
- Node.js: verzia 4.2.0 alebo vyššia.
- Dart Sass: verzia 1.0.0 alebo vyššia.
- Nunjucks: verzia 3.0.0 alebo vyššia (ak chcete používať makrá).
Možnosti implementácie
1. Statická HTML implementácia (HTML + minifikované súbory)
Ak váš projekt nevyužíva Node.js alebo bundler (napr. Webpack, Vite), môžete použiť hotové buildy. Pri inštalácii z dist sa používajú kompilované a minifikované verzie šablóny so štýlmi. To znamená, že nebudete môcť:
- selektívne zahrnúť CSS alebo JavaScript pre jednotlivé komponenty
- zostaviť si vlastné štýly alebo komponenty na základe palety alebo typografických kombinácií
- prispôsobiť si kód (napríklad prepísať farby alebo povoliť globálne štýly)
- použiť dynamické komponenty z Nunjucks šablón
Stiahnite si najnovšie kompilované a minifikované verzie šablón štýlov, JavaScript a assetov. Skopírujte celý assets priečinok a minifikované súbory do rootu vášho projektu. Štruktúra by mala vyzerať približne takto:
project/
│
├── assets - images
- fonts
├── index.html
├── frontend.min.css
├── frontend.min.js
├── frontend.min.css.map
└── frontend.min.js.mapDo časti head vložte minifikované css. Na záver body pripojte minifikovaný javascript a inicializujte ho.
<!DOCTYPE html>
<html>
<head>
<title>Ukážka</title>
<link rel="stylesheet" href="frontend.min.css">
</head>
<body>
<script type="module" src="./frontend.min.js"></script>
<script type="module">
import { initAll } from './frontend.min.js'
initAll()
</script>
</body>
</html>Zo stránky dokumentácie stiahnite HTML kód komponentu rozbaľovací zoznam (otvorí sa v novom okne) a vložte ho do svojho HTML. Ak používate čisté HTML, musíte do značky <div> pridať atribút id. Tento atribút musí byť unikátny v rámci domény.
<div class="govuk-form-group">
<label class="govuk-label" for="select-1">
Label text goes here
<span class="idsk-required">*</span>
</label>
<select class="govuk-select" id="select-1" name="select-1">
<option value="1">GOV.UK frontend option 1</option>
<option value="2" selected>GOV.UK frontend option 2</option>
<option value="3" disabled>GOV.UK frontend option 3</option>
</select>
</div>2. Pokročilá integrácia (NPM + SCSS + JS)
- Nainštalujte balíkPre inštaláciu cez NPM spustite (po skončení inštalácie sa balík
@id-sk/frontendobjaví vnode_modules):npm install nunjucks --save npm i @id-sk/frontend@3.0.0-beta.0-hotfix - Pridajte Nunjucks/HTMLDo pripraveného súboru (či už .html alebo .njk) vložte kód, ktorý nájdete vyššie.
- Importujte štýlyPre import individuálneho IDSK komponentu, v tomto prípade Rozbaľovacieho poľa, do svojho Sass súboru pridajte:
@import "node_modules/@id-sk/frontend/idsk/components/select/select"; - Importujte JavascriptID-SK Frontend komponenty s JavaScript správaním majú vo svojom markupe nastavený atribút
data-module. Pre import javascriptu rozbaľovacieho poľa, vložte do .js súboru:import { Select, createAll } from 'govuk-frontend' createAll(Select)