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
Datovælger
Eksempel på datovælger med fejlmeddelelse
<div class="form-group form-error">
<label class="form-label" for="datepicker-example-error1">Dato for aftale</label>
<span class="form-error-message" id="datepicker-example-error1-error">
<span class="sr-only">Fejl: </span>Vælg en dato
</span>
<div class="date-picker">
<input type="text" id="datepicker-example-error1" name="datepicker-example-error1"
class="form-input" aria-invalid="true"
aria-describedby="datepicker-example-error1-error" required>
</div>
</div>
Dropdown
Eksempel på dropdown med fejlmeddelelse
<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" required>
<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>
Inputfelt
Inputfelt med suffix
Eksempel på inputfejl med suffix og fejlmeddelelse
<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 type="number" id="input-pris-error" name="input-pris-error"
class="form-input input-char-11" value="123" 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
Eksempel på tekstområde med fejlmeddelelse
<div class="form-group form-error">
<label class="form-label" for="textarea-error">Tekstområde med fejlmeddelelse</label>
<span class="form-error-message" id="textarea-error-error">
<span class="sr-only">Fejl: </span>Hjælpsom fejlmeddelelse
</span>
<textarea class="form-input" id="textarea-error" name="textarea-error" rows="5" required aria-describedby="textarea-error-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