Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Fejlmeddelelser
Eksempler og retningslinjer
Installation
HTML Struktur
For at hjælpe skærmlæsere tilføjes en skjult tekst “Fejl:” foran fejlmeddelelsen. Brugere af skærmlæser vil da høre “Fejl: Datoen for udløb af dit pas bør være i fortiden.”
Teksten er skjult i et <span>
element med klassen sr-only
.
Fejlmeddelelsen vises også i fejlopsummeringen øverst på siden.
Varianter
Accordions
Datofelter
Dropdown
<form novalidate class="form mb-7 input-width-m">
<div class="form-group form-error">
<label class="form-label" for="options-error">
Dropdown (select)
</label>
<span class="form-error-message" id="options-error-error"><span
class="sr-only">Fejl:</span> Vælg en mulighed</span>
<select class=" form-select" name="options-error"
id="options-error" aria-invalid="true"
aria-describedby=" options-error-error">
<option value="option1">Ingen mulighed valgt</option>
<option value="option2">Mulighed 1</option>
<option value="option3">Mulighed 2</option>
<option value="option4">Mulighed 3</option>
</select>
</div>
</form>
Inputfelt
Inputfelt med suffix
<div class="form-group form-error">
<label class="form-label" for="input-pris-error">
Pris i 1000 kr.
</label>
<span class="form-error-message" id="input-pris-error-error">
<span class="sr-only">Fejl:</span> Angiv en pris
</span>
<div class="form-input-wrapper form-input-wrapper--suffix"><input
class="form-input input-char-11" id="input-pris-error"
name="input-pris" type="number" aria-invalid="true"
aria-describedby=" input-pris-error-error " required />
<div class="form-input-suffix" aria-hidden="true">.000 kr</div>
</div>
</div>
Radioknapper
Tekstområde
<div class="form-group form-error">
<label class="form-label" for="input-error">
Tekstområde med fejlmeddelelse
</label>
<span class="form-error-message"
id="form-error-message-input-error"><span
class="sr-only">Fejl:</span> Hjælpsom fejlmeddelelse</span>
<textarea class="form-input " rows="5" id="input-error" name="input-error" aria-describedby="form-error-message-input-error " ></textarea>
</div>
Sørg for at rette værdierne i følgende attributter, så de svarer til din løsning:
for
id
name
aria-describedby