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

Vyberte možnosť

Vyberte jednu z dostupných možností.

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).

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, Enter alebo Alt + Ší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.
Enter alebo Medzerní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út required pri natívnom prvku alebo aria-required="true" pri vlastnom komponente.
Pri vlastnom rozbaľovacom poli zabezpečte správne stavy ako aria-expanded, aria-controls, aria-activedescendant a aria-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íklad autocomplete="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 a zahrňte zdroje
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.map
```

Prepojte štýly a skripty

Do č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>

Skopírujte HTML kód

Zo stránky dokumentácie stiahnite HTML kód komponentu rozbaľovací zoznam (otvorí sa na novej karte) 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ík
Pre inštaláciu cez NPM spustite (po skončení inštalácie sa balík @id-sk/frontend objaví v node_modules):
```
npm install nunjucks --save
npm i @id-sk/frontend@3.0.0-beta.0-hotfix
```
Pridajte Nunjucks/HTML
Do pripraveného súboru (či už .html alebo .njk) vložte kód, ktorý nájdete vyššie.
Importujte štýly
Pre 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 Javascript
ID-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)
```

Doména gov.sk je oficiálna

Táto stránka je zabezpečená

Rozbaľovacie pole (Select)

Použitie rozbaľovacieho poľa

Ako sa používa

Ako sa nepoužíva

Varianty a stavy rozbaľovacieho poľa

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

Prístupnosť (Accessibility)

Klávesové ovládanie

Základné pravidlá prístupnosti

Implementácia rozbaľovacieho poľa z ID-SK Frontend

Základné požiadavky

Možnosti implementácie

1. Statická HTML implementácia (HTML + minifikované súbory)

Stiahnite a zahrňte zdroje

Prepojte štýly a skripty

Skopírujte HTML kód

2. Pokročilá integrácia (NPM + SCSS + JS)

Nainštalujte balík

Pridajte Nunjucks/HTML

Importujte štýly

Importujte Javascript