Prepínacie pole (Radios)
Prepínacie pole umožňuje používateľovi vybrať práve jednu možnosť zo skupiny vzájomne sa vylučujúcich možností. Najčastejšie sa používa vo formulároch, keď je vhodné zobraziť všetky dostupné možnosti naraz a používateľ má medzi nimi urobiť jednoznačný výber.
Použitie prepínacieho poľa
Komponent prepínacie pole umožňuje používateľom vybrať iba jednu z viacerých navrhovaných možností. Najčastejšie sa používa vo formulároch pri možnostiach, ktoré sa navzájom vylučujú.
Prepínacie polia sú vhodné najmä vtedy, keď je počet možností primeraný a používateľovi pomôže, ak ich vidí všetky naraz. Pri viacerých možnostiach sa spravidla zoraďujú pod seba, ak nejde o špecifický vizuálny prípad, napríklad škálu spätnej väzby.
Ako sa používa
- ak si používateľ môže vybrať iba jednu možnosť,
- ak sú možnosti vzájomne sa vylučujúce,
- ak je vhodné zobraziť všetky možnosti naraz,
- napríklad pri výbere spôsobu platby alebo doručenia,
- v jednej jasne pomenovanej logickej skupine.
Ako sa nepoužíva
- keď používateľ potrebuje vybrať viac možností naraz — vtedy použite začiarkavacie pole,
- keď je možností príliš veľa — vtedy zvážte rozbaľovacie pole,
- bez kontextu, otázky alebo zrozumiteľnej legendy,
- ako navigačný prvok,
- na potvrdenie jednej samostatnej voľby áno/nie.
Varianty a stavy
1. Začiarknuté a nezačiarknuté prepínacie pole
2. Neaktívny a chybový stav
3. Veľké a malé prepínacie pole
4. Nepovinná skupina
5. Prepínacie pole s doplňujúcim textom pri možnosti
Prístupnosť (Accessibility)
Prepínacie pole je navrhnuté tak, aby podporovalo ovládanie klávesnicou a používanie s asistenčnými technológiami. Pri implementácii je dôležité zachovať natívne HTML prvky, správne zoskupenie možností a programové prepojenie popisov, nápovedy a chybových hlásení.
Klávesové ovládanie
Tab– presunie zameranie na aktuálne vybranú možnosť v skupine, prípadne na prvú dostupnú možnosť, ak ešte žiadna nie je vybraná.Shift + Tab– presunie zameranie na predchádzajúci interaktívny prvok mimo skupiny.Šípky ↑ ↓ ← →– presúvajú výber medzi jednotlivými možnosťami v rámci skupiny.Medzerník– vyberie aktuálne zameranú možnosť, ak ešte nie je vybraná.
Základné pravidlá prístupnosti
- Každé prepínacie pole musí byť natívny element
<input type="radio">. Nenahrádzajte ho prvkomdivalebo vlastným widgetom, ak na to nie je vážny dôvod. - Každé prepínacie pole musí mať viditeľnú menovku implementovanú cez
<label>a prepojenú s inputom pomocou atribútovforaid. - Všetky prepínacie polia patriace do jednej otázky musia byť zoskupené v elemente
<fieldset>. Názov skupiny musí byť uvedený v elemente<legend>. - Všetky možnosti v jednej skupine musia mať rovnaký atribút
name. Inak ich prehliadač nebude považovať za jednu skupinu vzájomne sa vylučujúcich možností. - Ak je skupina povinná, použite natívny atribút
requiredna prepínacích poliach. Vizuálna hviezdička označujúca povinné pole má byť skrytá pred čítačkami pomocouaria-hidden="true". - Nápovedu k celej skupine alebo ku konkrétnej možnosti prepojte cez
aria-describedby, aby ju mohli oznámiť aj asistenčné technológie. - Pri chybovom stave nastavte
aria-invalid="true"a chybové hlásenie programovo prepojte s poľom alebo skupinou. Prakticky najrobustnejší pattern je použiťaria-describedbyaj pre text chyby. - Chybové hlásenie má pomenovať konkrétne chybné pole alebo skupinu. Text typu „Toto pole je povinné“ je menej vhodný ako napríklad „Spôsob kontaktovania je povinný. Vyberte jednu z možností.“
- Kritická, právna alebo obmedzujúca voľba by nemala byť automaticky predvybraná. Používateľ má mať možnosť urobiť vedomé rozhodnutie.
Implementácia prepínacieho 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íklad Webpack alebo 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 lang="sk">
<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 prepínacie pole (otvorí sa v novom okne) a vložte ho do svojho HTML. Ak používate JavaScript správanie komponentu, nezabudnite na atribút data-module="govuk-radios".
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Kde žijete?
</h1>
</legend>
<div class="govuk-radios" data-module="govuk-radios">
<div class="govuk-radios__item">
<input
class="govuk-radios__input"
id="where-do-you-live"
name="where-do-you-live"
type="radio"
value="slovensko"
>
<label
class="govuk-label govuk-radios__label"
for="where-do-you-live"
>
Slovensko
</label>
</div>
<div class="govuk-radios__item">
<input
class="govuk-radios__input"
id="where-do-you-live-2"
name="where-do-you-live"
type="radio"
value="zahranicie"
>
<label
class="govuk-label govuk-radios__label"
for="where-do-you-live-2"
>
Zahraničie
</label>
</div>
</div>
</fieldset>
</div>2. Pokročilá integrácia (NPM + SCSS + JS)
- Nainštalujte balíkPre inštaláciu cez NPM spustite:
npm install nunjucks --save npm i @id-sk/frontend@3.0.0-beta.0-hotfix - Pridajte Nunjucks alebo HTMLDo pripraveného súboru vložte HTML kód komponentu alebo použite zodpovedajúce Nunjucks makro, ak ho máte v projekte dostupné.
- Importujte štýlyPre import individuálneho ID-SK komponentu prepínacie pole do svojho Sass súboru pridajte:
@import "node_modules/@id-sk/frontend/idsk/components/radios/radios"; - Inicializujte JavaScriptID-SK komponenty s JavaScript správaním je potrebné inicializovať. Ak inicializujete všetky komponenty naraz, použite:
import { initAll } from 'govuk-frontend' initAll()