Radio
Kedy použiť tento komponent
Komponent použite, keď užívateľ môže vybrať iba jednu z možností
Kedy nepoužiť tento komponent
Nepoužívajte komponent, ak potrebujete umožniť používateľom zadať viac možností. V tomto prípade použite checkboxes.
Prepínače umiestnené vedľa seba
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend">
Máte už vytvorený osobný účet?
</legend>
<div class="govuk-radios govuk-radios--inline">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="changed-name" name="changed-name" type="radio" value="ano">
<label class="govuk-label govuk-radios__label" for="changed-name">
Áno
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="changed-name-2" name="changed-name" type="radio" value="nie">
<label class="govuk-label govuk-radios__label" for="changed-name-2">
Nie
</label>
</div>
</div>
</fieldset>
</div>
Prepínače umiestnené pod sebou
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend">
V ktorej časti Slovenska žijete?
</legend>
<div class="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="v-ktorej-casti-slovenska-zijete" name="v-ktorej-casti-slovenska-zijete" type="radio" value="zapadneSlovensko">
<label class="govuk-label govuk-radios__label" for="v-ktorej-casti-slovenska-zijete">
Západné Slovensko
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="v-ktorej-casti-slovenska-zijete-2" name="v-ktorej-casti-slovenska-zijete" type="radio" value="stredneSlovensko">
<label class="govuk-label govuk-radios__label" for="v-ktorej-casti-slovenska-zijete-2">
Stredné Slovensko
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="v-ktorej-casti-slovenska-zijete-3" name="v-ktorej-casti-slovenska-zijete" type="radio" value="vychodneSlovensko">
<label class="govuk-label govuk-radios__label" for="v-ktorej-casti-slovenska-zijete-3">
Východne Slovensko
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="v-ktorej-casti-slovenska-zijete-4" name="v-ktorej-casti-slovenska-zijete" type="radio" value="zijemMimo">
<label class="govuk-label govuk-radios__label" for="v-ktorej-casti-slovenska-zijete-4">
Žijem mimo Slovenska
</label>
</div>
</div>
</fieldset>
</div>
Prepínače s nápovedou
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="prihlasenie-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
Ako sa chcete prihlásiť?
</legend>
<span id="prihlasenie-hint" class="govuk-hint">
Musíte byť zaregistrovaný na našom portáli
</span>
<div class="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="prihlasenie" name="prihlasenie" type="radio" value="meno a heslo" aria-describedby="prihlasenie-item-hint">
<label class="govuk-label govuk-radios__label" for="prihlasenie">
Prihlásiť sa pomocou mena a hesla
</label>
<span id="prihlasenie-item-hint" class="govuk-hint govuk-radios__hint">
Použijete meno a heslo, ktoré ste si vybrali pri registrácii.
</span>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="prihlasenie-2" name="prihlasenie" type="radio" value="obciansky preukaz" aria-describedby="prihlasenie-2-item-hint">
<label class="govuk-label govuk-radios__label" for="prihlasenie-2">
Prihlásiť sa pomocou čítačky občianskeho preukazu
</label>
<span id="prihlasenie-2-item-hint" class="govuk-hint govuk-radios__hint">
Použijete svoj občiansky preukaz a čítačku.
</span>
</div>
</div>
</fieldset>
</div>
Chybový stav
<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="zmenene-meno-hint zmenene-meno-error">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
Zmenili ste si meno?
</legend>
<span id="zmenene-meno-hint" class="govuk-hint">
Odpoveď sa týka aj zmeny priezviska
</span>
<span id="zmenene-meno-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Toto pole je povinné
</span>
<div class="govuk-radios govuk-radios--inline">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="zmenene-meno" name="zmenene-meno" type="radio" value="ano">
<label class="govuk-label govuk-radios__label" for="zmenene-meno">
Áno
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="zmenene-meno-2" name="zmenene-meno" type="radio" value="nie">
<label class="govuk-label govuk-radios__label" for="zmenene-meno-2">
Nie
</label>
</div>
</div>
</fieldset>
</div>
Neaktívny stav
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend">
V ktorej časti Slovenska žijete?
</legend>
<div class="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="neaktivny-stav" name="neaktivny-stav" type="radio" value="zapadneSlovensko" disabled>
<label class="govuk-label govuk-radios__label" for="neaktivny-stav">
Západné Slovensko
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="neaktivny-stav-2" name="neaktivny-stav" type="radio" value="stredneSlovensko">
<label class="govuk-label govuk-radios__label" for="neaktivny-stav-2">
Stredné Slovensko
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="neaktivny-stav-3" name="neaktivny-stav" type="radio" value="vychodneSlovensko">
<label class="govuk-label govuk-radios__label" for="neaktivny-stav-3">
Východne Slovensko
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="neaktivny-stav-4" name="neaktivny-stav" type="radio" value="zijemMimo">
<label class="govuk-label govuk-radios__label" for="neaktivny-stav-4">
Žijem mimo Slovenska
</label>
</div>
</div>
</fieldset>
</div>
Podmienečné prepínače
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Aký je váš preferovaný spôsob kontaktovania?
</h1>
</legend>
<div class="govuk-radios govuk-radios--conditional" data-module="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="contact" name="contact" type="radio" value="email" data-aria-controls="conditional-contact">
<label class="govuk-label govuk-radios__label" for="contact">
Email
</label>
</div>
<div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-contact">
<div class="govuk-form-group">
<label class="govuk-label" for="kontakovanie-emailom">
E-mailová adresa
</label>
<input class="govuk-input govuk-!-width-one-third" id="kontakovanie-emailom" name="kontakovanie-emailom" type="email">
</div>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="contact-2" name="contact" type="radio" value="telefon" data-aria-controls="conditional-contact-2">
<label class="govuk-label govuk-radios__label" for="contact-2">
Telefón
</label>
</div>
<div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-contact-2">
<div class="govuk-form-group">
<label class="govuk-label" for="kontaktovanie-telefonicky">
Telefónne číslo
</label>
<input class="govuk-input govuk-!-width-one-third" id="kontaktovanie-telefonicky" name="kontaktovanie-telefonicky" type="tel">
</div>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="contact-3" name="contact" type="radio" value="textova-sprava" data-aria-controls="conditional-contact-3">
<label class="govuk-label govuk-radios__label" for="contact-3">
Textová správa
</label>
</div>
<div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-contact-3">
<div class="govuk-form-group">
<label class="govuk-label" for="kontaktovanie-spravou">
Telefónne číslo
</label>
<input class="govuk-input govuk-!-width-one-third" id="kontaktovanie-spravou" name="kontaktovanie-spravou" type="tel">
</div>
</div>
</div>
</fieldset>
</div>