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 a zahrňte zdroje
Stiahnite si najnovšie kompilované a minifikované verzie šablón štýlov, JavaScript a assetov. Skopírujte celý
assetsprieč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.mapPrepojte štýly a skripty
Do časti
headvložte minifikované css. Na záverbodypripojte 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 začiarkavacie pole (otvorí sa na novej karte) 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ík
Pre 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-hotfixPridajte 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 (začiarkavacie pole) do svojho Sass súboru pridajte:@import "node_modules/@id-sk/frontend/idsk/components/checkboxes/checkboxes";Importujte Javascript
ID-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()