Prekočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Späť

Select

Odporučenie

Je potrebné sa vyhýbať používaniu rozbaľovacích zoznamov (select). Namiesto nich je lepšie použiť prepínače (radio button) alebo začiarkavacie políčka (checkbox).

Základný stav


<div class="govuk-form-group">
   <label class="govuk-label" for="select-1">
      Označenie poľa
   </label>
   <select class="govuk-select" id="select-1" name="select-1">
      <option hidden selected>Vyberte zo zoznamu</option>
      <option value="volba1">slovensko.sk voľba 1</option>
      <option value="volba2">slovensko.sk voľba 2</option>
   </select>
</div>

Neaktívny stav


<div class="govuk-form-group">
   <label class="govuk-label" for="select-2">
      Označenie poľa
   </label>
   <select class="govuk-select" id="select-2" name="select-2">
      <option hidden selected>Vyberte zo zoznamu</option>
      <option value="volba1">slovensko.sk voľba 1</option>
      <option value="volba2" disabled>slovensko.sk voľba 2</option>
   </select>
</div>

Chybový stav

Tento krok je povinný 

<div class="govuk-form-group govuk-form-group--error">
   <label class="govuk-label" for="pocet-zamestnancov">
      Vyberte počet zamestnancov
   </label>
   <span id="pocet-zamestnancov-error" class="govuk-error-message">Tento krok je povinný</span>
   <select class="govuk-select govuk-select--error" id="pocet-zamestnancov" name="pocet-zamestnancov">
      <option selected hidden>Vyberte zo zoznamu</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
   </select>
</div>

Podmienečný select

Podmienka tohto komponentu sa odvíja od aktuálnej hodnoty selectu. Ak je value zvolenej možnosti 'other', zobrazí sa podmienečný obsah.

Aby tento komponent správne fungoval, potrebuje mať 2 atribúty

  • aria-controls="[id podmienečne zobrazeného elementu]" - týmto atribútom určujeme obsah, ktorý sa podmienečne zobrazuje. Je potrebné nastaviť rovnakú hodnotu ako ID elementu, ktorý podmienečne zobrazujeme.
  • data-conditional-select="" - na tento atribút sa pripína script, ktorý kontroluje aktuálnu value selectu, a teda zobrazuje alebo skrýva podmienečný obsah.

<div class="govuk-form-group">
   <label class="govuk-label" for="kontaktna-osoba">
      Kontaktná osoba
   </label>
   <select class="govuk-select govuk-!-width-full" id="kontaktna-osoba" name="kontaktna-osoba" aria-controls="conditional-content"  data-conditional-select="">
      <option value="Vyberte zo zoznamu" selected hidden="hidden">Vyberte zo zoznamu</option>
      <option value="kontaktna-osoba-1">Kontaktná osoba 1</option>
      <option value="kontaktna-osoba-2">Kontaktná osoba 2</option>
      <option value="kontaktna-osoba-3">Kontaktná osoba 3</option>
      <option value="other">Pridať inú kontaktnú osobu</option>
   </select>
</div>

<div class="govuk-grid-row govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-content">
   <div class="govuk-grid-column-full">
      <div class="govuk-form-group">
         <label class="govuk-label" for="titul-pred-menom">
           Titul pred menom (nepovinné)
         </label>
         <input class="govuk-input govuk-!-width-two-thirds" id="titul-pred-menom" name="titul-pred-menom" type="text">
      </div>
      <div class="govuk-form-group">
         <label class="govuk-label" for="krstne-meno">
           Krstné meno
         </label>
         <input class="govuk-input govuk-!-width-full" id="krstne-meno" name="krstne-meno" type="text">
      </div>
    </div>
  </div>