Text input
Kedy použiť tento komponent
Komponent použite, keď potrebujete umožniť používateľom zadávať text, ktorý nie je dlhší ako jeden riadok, napríklad ich meno alebo telefónne číslo.
Kedy nepoužiť tento komponent
Nepoužívajte komponent, ak potrebujete umožniť používateľom zadávať dlhšie odpovede, ktoré môžu byť dlhšie ako jeden riadok. V takom prípade by ste mali použiť komponent textarea.
Základný stav
<div class="govuk-form-group">
<label class="govuk-label" for="input-lb-documentation-example">
Meno a priezvisko
</label>
<input class="govuk-input" id="input-lb-documentation-example" name="fullName" type="text">
</div>
Aktívny stav
<div class="govuk-form-group">
<label class="govuk-label" for="input-example2">
Meno a priezvisko
</label>
<input class="govuk-input :focus" id="input-example2" name="fullName" type="text">
</div>
S nápovedou
Uveďte krstné meno a priezvisko
<div class="govuk-form-group">
<label class="govuk-label govuk-label--l" for="input-example3">
Aké je vaše meno?
</label>
<span id="input-example3-hint" class="govuk-hint">
Uveďte krstné meno a priezvisko
</span>
<input class="govuk-input" id="input-example3" name="fullName" type="text" aria-describedby="input-example3-hint">
</div>
Chybový stav
Zadajte v tvare - Ulica, číslo, PSČ, mesto
<div class="govuk-form-group govuk-form-group--error">
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="input-example4">
Aká je Vaša adresa?
</label>
</h1>
<span id="input-example4-hint" class="govuk-hint">
Zadajte v tvare - Ulica, číslo, PSČ, mesto
</span>
<span id="input-example4-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span>
Zadajte Vašu adresu
</span>
<input class="govuk-input govuk-input--error" id="input-example4" name="fullName" type="text" aria-describedby="input-example4-hint input-example4-error">
</div>
Neaktívny stav
<div class="govuk-form-group">
<label class="govuk-label vpm-color-disabled" for="meno">
Aké je vaše meno?
</label>
<input class="govuk-input vpm-border-disabled" id="meno" name="meno" type="text" disabled="disabled">
</div>
S predvyplnenou hodnotou
<div class="govuk-form-group">
<label class="govuk-label" for="krstne-meno">
Krstné meno
</label>
<input class="govuk-input" id="krstne-meno" name="krstne-meno" type="text" value="Ján">
</div>
Dátum
Najviac dva mesiace od dnešného dňa
<div class="govuk-form-group">
<label class="govuk-label" for="ukoncenie-pracovnej-ponuky">
Termín ukončenia pracovnej ponuky
</label>
<span id="ukoncenie-pracovnej-ponuky-hint" class="govuk-hint">
Najviac dva mesiace od dnešného dňa
</span>
<input class="govuk-input" id="ukoncenie-pracovnej-ponuky" name="ukoncenie-pracovnej-ponuky" type="date" value="2021-02-03" min="2021-03-02" max="2021-05-02">
</div>