Viacriadkové textové pole (Textarea)

Viacriadkové textové pole je interaktívny prvok v grafickom dizajne, ktorý umožňuje používateľovi zadať viacero riadkov textu. Na rozdiel od jednoriadkového textového poľa, ktoré umožňuje zadať iba jeden riadok textu, viacriadkové textové pole dáva možnosť používateľom zadať dlhšie texty.

Použitie viacriadkového textového poľa

Príklad viacriadkového textového poľa

Komponent viacriadkové textové pole sa primárne využíva vo formulároch. Viacriadkové textové pole je využívané zvyčajne pre zber väčšieho množstva informácii, ako napríklad zanechanie spätnej väzby. Pri výbere viacriadkového textového poľa je nutné určiť povinnosť textového poľa podľa zadefinovaných pravidiel. Počet možných zadaných znakov je zobrazený v pravom dolnom rohu textového poľa.

Ako sa používa

Používa sa na získavanie dlhších súvislých odpovedí.
Používa sa na komentáre, opis problému, doplňujúce informácie atď.
Používa sa s jasným znázornením, či je pole povinné alebo nepovinné.
Používa sa s počtom znakov v pravom dolnom rohu poľa.

Ako sa nepoužíva

Nepoužíva sa pre krátke vstupy a pre štruktúrované údaje (meno, e-mail, telefón).
Nepoužíva sa s horizontálnym scrollovaním textu.
Nepoužíva sa bez informácie o maximálnom počte znakov.

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 asistenčnými zariadeniami.

Klávesové ovládanie

Tab – presun zamerania klávesnicou do viacriadkového textového poľa alebo na ďalší prvok formulára.
Shift + Tab – presun zamerania klávesnicou na predchádzajúci prvok.
Enter – potvrdenie formulára (ak je pole súčasťou formulára).
Esc – zrušenie vstupu (iba ak je implementované správanie na úrovni formulára).
Zadávanie textu funguje štandardne pomocou klávesnice.

Základné pravidlá prístupnosti

Viacriadkové textové pole musí používať natívny HTML znak <textarea>.
Každá <textarea> musí mať programovo asociovaný label cez for a id (v Reacte htmlFor).
Nie je vhodné horizontálne scrollovanie – preto použite zalomenie textu cez atribút wrap.
V prípade predpokladu dlhšieho textu viete prispôsobiť veľkosť okna cez atribúty rows a cols a obmedziť jeho maximálnu dĺžku cez maxLength.
Prípadný placeholder slúži len ako príklad (napr.: Objavil som nasledovnú chybu...). Placeholder NEFUNGUJE ako náhrada labelu a hintu a NESMIE vysvetľovať funkciu textového poľa.
Neaktívne pole (disabled) nesmie byť focusovateľné (zamerateľné klávesnicou).
Pre dynamické zmeny – napríklad pre počítadlo znakov – pridajte pre asistenčné technológie atribút aria-live="polite" spolu s limitom znakov v maxLength.
Prípadný popis prepojte na pole cez atribút aria-describedby.
V prípade povinného poľa nezabudnite pridať atribút required.
Hviezdička (označujúca povinné pole) musí byť vložená prostredníctvom elementu <span>, aby ju bolo možné pred aistenčnými technológiami skryť prostredníctvom atribútu aria-hidden="true".
Nezabudnite, že samotná hviezdička na označenie povinného poľa nestačí – musí byť dodatočne vysvetlená pomocou vysvetlivky označenia povinných polí.
Chybové hlásenia realizujte prostredníctvom JavaScriptu a napojte ich napríklad na HTML atribút required. Chybový hint musí byť prepojený s poľom cez atribút aria-describedby.
Okrem farby, ikony a textu upozornenia nezabudnite v prípade chyby pridať pre asistenčné technológie atribút aria-invalid="true".

Implementácia viacriadkového textového 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

Do časti head vložte minifikované css. Na záver body pripojte minifikovaný javascript.

<!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> 
  </body> 
</html>

➜ Skopírujte HTML kód

Zo stránky dokumentácie stiahnite HTML kód komponentu viacriadkové textové pole (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 data-module="govuk-textarea" class="govuk-form-group">
  <label class="govuk-label" for="more-detail">
    Viacriadkové textové pole
    <span class="idsk-required">*</span>
  </label>
  <div class="idsk-textarea__wrapper">
    <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5" maxlength="200"></textarea>
    <span class="idsk-textarea--counter" aria-live="polite">
      <span>0</span> / 200
    </span>
  </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/frontend objaví v node_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 Viacriadkového textového poľa, do svojho Sass súboru pridajte:
```
@import "node_modules/@id-sk/frontend/idsk/components/textarea/textarea";
```
Importujte JavascriptID-SK Frontend komponenty s JavaScript správaním majú vo svojom markupe nastavený atribút data-module. Pre import javascriptu viacriadkového textového poľa, vložte do .js súboru:
```
import { Textarea, createAll } from 'govuk-frontend' 

createAll(Textarea)
```

Doména gov.sk je oficiálna

Táto stránka je zabezpečená