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
<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>