Začiarkavacie pole (Checkbox)
Začiarkavacie pole je interaktívny prvok, ktorý umožňuje používateľovi vybrať jednu alebo viacero položiek z množiny možností. Používateľ označí Začiarkavacie pole kliknutím do štvorca a zruší označenie opätovným kliknutím.
Použitie začiarkavacieho poľa
Začiarkavacie pole je interaktívny komponent, ktorý slúži na získanie súhlasu alebo potvrdenie výberu v používateľskom rozhraní. Komponent je využívaný prevažne s popisom, ktorý definuje funkcionalitu komponentu.
Obsahuje tri stavy – začiarknutý, nezačiarknutý a neurčitý. Zmena stavu nastane kliknutím na komponent. V prípade použitia začiarkavacieho poľa pre získanie súhlasu alebo potvrdenia, je pole v predvolenom stave prázdne. Komponent funguje aj bez použitia skriptovacieho jazyka JavaScript, pričom aplikovanie jazyka JavaScript môže byť použité pre rozšírenú funkcionalitu.
Ako sa používa
- Používa sa ak používateľ môže vybrať 1 alebo viacero možností.
- Používa sa s rovnocennými a nezávislými možnosťami.
- Používa sa ak výber nie je vzájomne vylučujúci.
- Používa sa s viditeľnou, stručnou a zrozumiteľnou menovkou.
- Používa sa v zoskupení maximálne 10 polí - ak potrebujete viac možností použite rozbaľovacie pole.
Ako sa nepoužíva
- Nepoužíva sa ak používateľ môže vybrať len jednu možnosť - použite prepínacie pole.
- Nepoužíva sa ako prepínač stavu zapnuté / vypnuté s okamžitým efektom.
- Nepoužíva sa bez menovky.
- Nepoužíva sa len ako ikona alebo farba bez textu.
- Nespájajte viac významov, tém alebo kategórií do jedného poľa.
Varianty a stavy
1. Variant povinného a nepovinného začiarkavacieho poľa
2. Variant začiarkavacieho poľa s popisom a bez popisu
3. Variant začiarknutého a nezačiarknutého poľa
4. Varianty začiarkavacieho poľa – zrušený a chybový
5. Variant začiarkavacieho poľa – veľký a malý
Prístupnosť (Accessibility)
Začiarkavacie pole spĺňa požiadavky WCAG 2.1 AA. Podporuje ovládanie klávesnicou a asistenčnými technológiami.
Klávesové ovládanie
Tab– presun zamerania (fokusu) na začiarkavacie pole alebo na ďalší interaktívny prvok.Shift + Tab– presun zamerania na predchádzajúci interaktívny prvok.Medzerník (Space)– začiarknutie alebo zrušenie začiarknutia aktuálne zameraného poľa.
Základné pravidlá prístupnosti
- Vždy použite element
<label>pre popis začiarkavacieho poľa a nezabudnite ho programovo spárovať s konkrétnym inputom cez atribútyforaid. - Udržujte menovky (label) krátke a jasné. Ak potrebujete dlhšie vysvetlenie, nevkladajte ho do labelu, ale využite doplňujúci text (hint).
- Zoskupovanie: V prípade väčšieho počtu začiarkavacích polí, ktoré spolu logicky súvisia (1 skupina = 1 téma), musia byť implementované do spoločného tagu
<fieldset>. Samotná nadradená otázka pre túto skupinu musí byť definovaná cez natívny tag<legend>. - Snažte sa udržiavať poradie jednotlivých možností logické (napr. abecedne, chronologicky alebo podľa najčastejšej voľby) a v nápovede uveďte, koľko možností je možné vybrať.
- Prípadný hint (nápovedu) prepojte s príslušným začiarkavacím poľom (alebo s celým fieldsetom) prostredníctvom atribútu
aria-describedby. - V prípade povinného poľa pridajte inputu atribút
required. - Vizuálna hviezdička označujúca povinné pole musí byť vložená vo vnútri
<span aria-hidden="true">, aby ju čítačky obrazovky neduplikovali. Samotná hviezdička nestačí, význam povinných polí musí byť vysvetlený na začiatku formulára. - Pri chybovom stave musí mať input pridaný atribút
aria-invalid="true"a chybová hláška musí byť na input prepojená cezaria-describedby(aby ju čítačka prečítala hneď po zameraní poľa).
Implementácia začiarkavacieho 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 začiarkavacie pole (otvorí sa v novom okne) a vložte ho do svojho HTML. Nezabudnite na atribút data-module="govuk-checkboxes", bez ktorého nebude fungovať JavaScript (napr. podmienené odkrývanie obsahu).
<div class="govuk-form-group">
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="narodnost" name="narodnost" type="checkbox" value="british">
<label class="govuk-label govuk-checkboxes__label" for="narodnost">
Britská
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="narodnost-2" name="narodnost" type="checkbox" value="irish">
<label class="govuk-label govuk-checkboxes__label" for="narodnost-2">
Írska
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="narodnost-3" name="narodnost" type="checkbox" value="other">
<label class="govuk-label govuk-checkboxes__label" for="narodnost-3">
Občan inej krajiny
</label>
</div>
</div>
</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 (začiarkavacie pole) do svojho Sass súboru pridajte:
@import "node_modules/@id-sk/frontend/idsk/components/checkboxes/checkboxes"; - Importujte JavascriptID-SK (GOV.UK) komponenty s JavaScript správaním je nutné inicializovať. Pre inicializáciu konkrétneho komponentu začiarkavacie pole použite tento kód:
import { Checkboxes, initAll } from 'govuk-frontend' // Naštartovanie všetkých komponentov na stránke naraz (odporúčané) initAll()