Komponenter

Fejlmeddelelser

Fejlmeddelelser hjælper brugeren til at udfylde enkelte formularelementer korrekt.

Denne komponent er opdateret i Web Component-versionen

Komponenten har fået nyt udseende og funktionalitet samt forbedret tilgængelighed. De nye retningslinjer kan ses i beslutningslog for version 12.0.0.

Åbn dette eksempel i et nyt vindue

Hvad hedder dit kursus? Fx: Skriv godt Giv dit kursus et navn

Sådan bruges komponenten

Anvendes til

Brug fejlmeddelelser til at hjælpe brugeren korrekt igennem selvbetjeningsløsningen. Fortæl brugeren, hvad der skal til for at rette problemet og komme videre i et simpelt og venligt sprog.

Brug også fejlmeddelelser til at vise, hvor fejlen eller manglen er, så brugeren ikke skal lede, ved at sætte fejlmeddelelsen umiddelbart over det, der skal rettes eller mangler.

Anvendes ikke til

Brug ikke fejlmeddelelser til at fortælle brugerne, at de ikke er berettigede eller ikke har tilladelse til at gøre noget. I stedet for vis dem en side, der fortæller dem, at de ikke er berettigede, og giver dem nyttige oplysninger om, hvad de skal gøre som det næste.

Brug ikke fejlmeddelelser til at give brugeren beskeder om fejl, der ikke har med brugerens indtastninger og input at gøre, som fx systemfejl. Brug da en besked.

Vejledning

Fejlmeddelelsen skal også vises som et link til fejlen i fejlopsummeringen. Derfor skal fejlmeddelelsen give mening for brugeren, når den læses for sig selv i fejlopsummeringen.

Vis fejlmeddelelsen i rød umiddelbart over, der hvor fejlen er.

Vis en rød streg i venstre side af området, ud for fejlen for at fremhæve fejlen.

Marker også selve feltet der er fejl i med rødt.

For at hjælpe skærmlæsere tilføjes en skjult tekst med ordet “Fejl:” foran fejlmeddelelsen. Brugere af skærmlæser vil da fx høre “Fejl: Dette er ikke en gyldig mailadresse.”

Skriv klart og præcist

Beskriv for brugeren, hvad der er sket og hvordan det kan rettes.

Meddelelsen skal være skrevet i lægmandssprog, være imødekommende og så kortfattet som muligt.

Kom ikke med et eksempel i fejlmeddelelsen, hvis der allerede er et eksempel som hjælpetekst. Hvis du fx beder om et cpr-nummer og der allerede under labelen står “ddmmåååå-nnnn” eller “22091908-1856” som hjælpetekst, så skal det ikke også stå i fejlmeddelelsen.

Vær konsistent

Brug den samme fejlmeddelelse ved feltet og i fejlopsummeringen så de ser ens ud, lyder ens, og betyder det samme, og så de giver mening ude af kontekst.

Gør det nemt for brugeren at forstå, hvad der er sket og hvad der skal til for at komme videre. Brug således den label (spørgsmålet), der er knyttet til feltet, til at gøre fejlmeddelelsen forståelig. Fx, hvis et felt har en label, hvor der står “Hvor mange timer arbejder du om ugen?”, så kan fejlmeddelelsen være “Indtast hvor mange timer du arbejder om ugen”.

Vær præcis

Generelle fejlmeddelelser er ikke hjælpsomme og de giver ikke mening uden for kontekst. Undgå derfor fejlmeddelelser som:

“En fejl opstod”
“Svar på spørgsmålet”
“Vælg et svar fra listen”
“Udfyld feltet”
“Dette felt er påkrævet”

Undgå også fejlmeddelelser, der taler ned til eller skælder brugeren ud som fx:

“Skriv adressen korrekt”
“Du har lavet en fejl”
“Ikke godkendt”

Forskellige fejl har brug for forskellige fejlmeddelelser.

Fx kan der opstå forskellige fejl på inputfelter, felter kan være: tomme, for lange, for korte, indeholde ugyldige tegn, være i et forkert format, m.fl.

En fejlmeddelelse, der forklarer den specifikke situation er mere hjælpsom end den generiske fejlmeddelelse.

Den gode fejlmeddelelse vil fortælle brugeren, hvad der er sket og hvordan det kan løses.

Brug instruktioner og beskrivelser

Visse fejlmeddelelser fungerer bedst som instrukser og andre som beskrivelser. Fx:

“Indtast dit fornavn” er tydeligere og mere direkte end “Fornavn skal være udfyldt”
“Indtast et fornavn, der indeholder 35 bogstaver eller færre” bruger flere ord og er mindre direkte og naturligt end “Fornavnet må højst være på 35 bogstaver”.
“Indtast en dato efter den 31. august 2020, der viser hvornår du startede på det pågældende kursus” bruger flere ord og er mindre direkte og naturligt end “Startdatoen for det valgte kursus skal være efter den 31. august 2020”.

Brug både instrukser og beskrivelser, men brug dem konsekvent. Fx brug en instruktion til tomme felter som “Indtast dit navn” men brug en beskrivelse som “Navnet bør højst være 35 bogstaver” til felter som er for lange.

Sådan (do)

Eksempel på, hvordan en fejlmeddelelse kan se ud

Sådan: Indsæt fejlmeddelelser over det felt, hvor fejlen skal rettes, samt øverst på siden. Brug farven rød til både fejlmeddelelser og til at markere, hvor fejlen er (Wroblewski, 2008, s. 119-132). Farven rød signalerer i computersystemer "alarm", "fare", "problem", "fejl" osv. (Johnson, 2010, s. 72) og er den farve, det menneskelige øje ser bedst (Johnson, 2010, s. 54).

Ikke sådan (don't)

Eksempel på, hvordan en fejlmeddelelse ikke bør se ud

Ikke sådan: Undgå, at fejlmeddelelsen kun optræder ét sted på siden. Nogle brugere vil ikke få øje på den. Undgå også, at fejlen kun vises på én måde – fx med farve (Wroblewski, 2008, s. 119-133). Undgå så vidt muligt at bruge den røde farve til andet end fejlmeddelelser (Johnson, 2010, s. 57).

Varianter

Accordions

Åbn dette eksempel i et nyt vindue

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Gå til eksemplets kode

Datofelter

Åbn dette eksempel i et nyt vindue

Hvornår blev dit pas udstedt? For eksempel: 05 12 2018 Datoen kan ikke være i fremtiden

Dag

Måned

År

Gå til eksemplets kode

Datovælger

Åbn dette eksempel i et nyt vindue

Dato for aftale Vælg en dato

Gå til eksemplets kode

Åbn dette eksempel i et nyt vindue

Region Vælg region

Gå til eksemplets kode

Inputfelt

Åbn dette eksempel i et nyt vindue

Hvad er dit fulde navn? Skriv dit fulde navn, og adskil for- og efternavne med mellemrum, fx Anders Andersen

Gå til eksemplets kode

Inputfelt med suffix

Åbn dette eksempel i et nyt vindue

Pris i 1000 kr. Angiv en pris

Gå til eksemplets kode

Inputfelt med karakterbegrænsning

Åbn dette eksempel i et nyt vindue

Inputfelt med karakterbegrænsning Du kan maks. taste 20 tegn

Gå til eksemplets kode

Multiselect

Åbn dette eksempel i et nyt vindue

Frugter

Æble

Pære

Banan

Mango

Appelsin

Vandmelon

Blåbær

Jordbær

Kirsebær

Dette er en fejl

Gå til eksemplets kode

Radioknapper

Åbn dette eksempel i et nyt vindue

Sagen handler om Vælg hvad sagen handler om

Ulykkesforsikring

Erstatningsansvar

Forsikringsselskab

Gå til eksemplets kode

Tekstområde

Åbn dette eksempel i et nyt vindue

Tekstområde med fejlmeddelelse Hjælpsom fejlmeddelelse

Gå til eksemplets kode

Tekstområde med karakterbegrænsning

Åbn dette eksempel i et nyt vindue

Karakterbegrænsning med fejlmeddelelse Du kan maks. taste 50 tegn

Gå til eksemplets kode

Tjekboks

Åbn dette eksempel i et nyt vindue

Hvad er din nationalitet? Angiv om du er dansk, svensk eller anden nationalitet

Dansk

Svensk

Anden nationalitet

Gå til eksemplets kode

Vedhæft fil

Åbn dette eksempel i et nyt vindue

Vedhæft fil Filens størrelse skal være under 2MB

Gå til eksemplets kode

Ingen fil er valgt

Skriv “Vælg en [dokumenttype]”.
Fx “Vælg en lægeerklæring”.

Den valgte fil er forkert filtype

Skriv “Den valgte fil skal være af typen [liste af filtyper]”.
Fx “Den valgte fil skal være af typen CSV eller ODS” eller “Den valgte fil skal være af typen JPG, BMP, PNG, TIF eller PDF”.

Filen er for stor

Skriv “Filens størrelse skal være under [største filstørrelse]”.
Fx “Filens størrelse skal være under 2MB”.

Filen er tom

Skriv “Den valgte fil er tom”.

Filen indeholder en virus

Skriv “Den valgte fil indeholder en virus”.

Filen er beskyttet af en adgangskode

Skriv “Den valgte fil er beskyttet af en adgangskode”.

Der var en fejl, og filen ikke kunne uploades

Skriv “Den valgte fil kunne ikke uploades - prøv venligst igen”.

Der er en begrænsning på antal filer brugeren kan vælge

Skriv “Du kan kun vælge op til [højeste antal filer] filer på samme tid”.
Fx “Du kan kun vælge op til 10 filer på samme tid”.

Der ikke er brugt den korrekte skabelon

Skriv “Den valgte fil skal gøre brug af skabelonen”.

Se komponenten i eksempelløsninger

Referencer

Luke Wroblewski: Web Form Design: Filling in the Blanks (2008)
Jeff Johnson: Designing with the Mind in Mind, Second Edition (2014)
Understanding Success Criterion 3.3.1: Error Identification
Understanding Success Criterion 3.3.3: Error Suggestion

Installation

HTML Struktur

<div class="form-group form-error">
    <label class="form-label" for="form-error">Hvad hedder dit kursus?</label>

    <span class="form-hint" id="form-error-hint">Fx: Skriv godt</span>
    <span class="form-error-message" id="form-error-error">
        <span class="sr-only">Fejl: </span>Giv dit kursus et navn
    </span>

    <input type="text" id="form-error" name="form-error" class="form-input"
        aria-invalid="true" aria-describedby="form-error-hint form-error-error " required>
</div>

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. Attributten aria-describedby anvendes i stedet for aria-errormessage grundet bedre support for førstnævnte (se referencer).

Fejlmeddelelsen vises også i fejlopsummeringen øverst på siden.

Accordions

Vis dette eksempel i et nyt vindue

<ul class="accordion">
    <li class="accordion-error">
        <h3>
            <button class="accordion-button" aria-expanded="true"
                aria-describedby="error-example-accordion1-error"
                aria-controls="error-example-accordion1">
                <span class="accordion-title">Lorem ipsum dolor sit amet</span>
                <span class="accordion-icon">
                    <span class="icon_text">Fejl</span>
                    <svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#error"></use></svg>
                </span>
            </button>
        </h3>
        <div id="error-example-accordion1" aria-hidden="false" class="accordion-content">
            <div class="alert alert-error" role="alert" id='error-example-accordion1-error'>
                <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
                <div class="alert-body">
                    <p class="alert-text">Sed ut perspiciatis unde omnis iste natus error sit
                        voluptatem accusantium doloremque laudantium.</p>
                </div>
            </div>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
</ul>

Gå til eksemplets retningslinjer

Datofelter

Vis dette eksempel i et nyt vindue

<div class="form-group form-error">
    <fieldset
        aria-describedby="date-input-error-example-hint date-input-error-example-error ">
        <legend class="form-label">
            Hvornår blev dit pas udstedt?
        </legend>
        <span class="form-hint" id="date-input-error-example-hint">For eksempel: 05 12
            2018</span>
        <span class="form-error-message" id="date-input-error-example-error">
            <span class="sr-only">Fejl: </span>Datoen kan ikke være i fremtiden
        </span>
        <div class="date-group mt-3">

            <div class="form-group form-group-day">
                <label class="form-label" for="date-input-error-example-day">Dag</label>

                <input type="number" id="date-input-error-example-day" name="date-day"
                    class="form-input" value="01" required>
            </div>

            <div class="form-group form-group-month">
                <label class="form-label" for="date-input-error-example-month">Måned</label>

                <input type="number" id="date-input-error-example-month" name="date-month"
                    class="form-input" value="12" required>
            </div>

            <div class="form-group form-group-year">
                <label class="form-label" for="date-input-error-example-year">År</label>

                <input type="number" id="date-input-error-example-year" name="date-year"
                    class="form-input" value="2076" required>
            </div>

        </div>
    </fieldset>
</div>

Gå til eksemplets retningslinjer

Datovælger

Vis dette eksempel i et nyt vindue

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

Gå til eksemplets retningslinjer

Vis dette eksempel i et nyt vindue

<div class="form-group form-error">
    <label class="form-label" for="options-error">Region</label>

    <span class="form-error-message" id="options-error-error">
        <span class="sr-only">Fejl: </span>Vælg region
    </span>
    <select class="form-select" name="options-error" id="options-error" aria-invalid="true"
        aria-describedby="options-error-error" required>
        <option value="">Vælg region</option>
        <option value="option1">Hovedstaden</option>
        <option value="option2">Midtjylland</option>
        <option value="option3">Nordjylland</option>
        <option value="option4">Sjælland</option>
        <option value="option5">Syddanmark</option>
    </select>
</div>

Gå til eksemplets retningslinjer

Inputfelt

Vis dette eksempel i et nyt vindue

<div class="form-group form-error">
    <label class="form-label" for="fullname-error-example">Hvad er dit fulde navn?</label>

    <span class="form-error-message" id="fullname-error-example-error">
        <span class="sr-only">Fejl: </span>Skriv dit fulde navn, og adskil for- og efternavne
        med mellemrum, fx Anders Andersen
    </span>

    <input type="text" id="fullname-error-example" name="fullname-error-example"
        class="form-input" aria-invalid="true"
        aria-describedby="fullname-error-example-error " required autocomplete="name">
</div>

Gå til eksemplets retningslinjer

Inputfelt med suffix

Vis dette eksempel i et nyt vindue

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

Gå til eksemplets retningslinjer

Inputfelt med karakterbegrænsning

Vis dette eksempel i et nyt vindue

<div class="form-group form-error form-limit" data-maxlength="20">
    <label class="form-label" for="input-type-limit-error">Inputfelt med
        karakterbegrænsning</label>

    <span class="form-error-message" id="input-type-limit-error-error">
        <span class="sr-only">Fejl: </span>Du kan maks. taste 20 tegn
    </span>

    <input type="text" id="input-type-limit-error" name="input-type-limit-error"
        class="form-input" value="Dette er en sætning med mange tegn" aria-invalid="true"
        aria-describedby="input-type-limit-error-error input-type-limit-error-limit-message"
        required>
    <span id="input-type-limit-error-limit-message" class="sr-only">Du kan indtaste op til 20
        tegn</span>
    <span class="form-hint character-limit" aria-hidden="true">Du har 20 tegn tilbage</span>
    <span class="character-limit-sr-only sr-only" aria-live="polite">Du har 20 tegn
        tilbage</span>
</div>

Gå til eksemplets retningslinjer

Multiselect

Vis dette eksempel i et nyt vindue

<fds-multiselect>
    <span slot="label">Frugter</span>
    <fds-multiselect-opener></fds-multiselect-opener>

    <fds-multiselect-dialog>
        <fds-multiselect-options>
            <fds-multiselect-option>Æble</fds-multiselect-option>
            <fds-multiselect-option>Pære</fds-multiselect-option>
            <fds-multiselect-option>Banan</fds-multiselect-option>
            <fds-multiselect-option>Mango</fds-multiselect-option>
            <fds-multiselect-option>Appelsin</fds-multiselect-option>
            <fds-multiselect-option>Vandmelon</fds-multiselect-option>
            <fds-multiselect-option>Blåbær</fds-multiselect-option>
            <fds-multiselect-option>Jordbær</fds-multiselect-option>
            <fds-multiselect-option>Kirsebær</fds-multiselect-option>
        </fds-multiselect-options>
    </fds-multiselect-dialog>

    <fds-error-message>Dette er en fejl</fds-error-message>
</fds-multiselect>

Gå til eksemplets retningslinjer

Radioknapper

Vis dette eksempel i et nyt vindue

<div class="form-group form-error">
    <fieldset aria-describedby="radiogroup-error-error ">

        <legend class="form-label">Sagen handler om</legend>

        <span class="form-error-message" id="radiogroup-error-error">
            <span class="sr-only">Fejl: </span>Vælg hvad sagen handler om
        </span>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-error-option1" name="sagen-omhandler"
                class="form-radio" value="ulykkesforsikring">
            <label class="form-label" for="radiogroup-error-option1">Ulykkesforsikring</label>

        </div>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-error-option2" name="sagen-omhandler"
                class="form-radio" value="erstatningsansvar">
            <label class="form-label" for="radiogroup-error-option2">Erstatningsansvar</label>

        </div>

        <div class="form-group-radio">
            <input type="radio" id="radiogroup-error-option3" name="sagen-omhandler"
                class="form-radio" value="forsikringsselskab">
            <label class="form-label"
                for="radiogroup-error-option3">Forsikringsselskab</label>

        </div>

    </fieldset>
</div>

Gå til eksemplets retningslinjer

Tekstområde

Vis dette eksempel i et nyt vindue

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

Gå til eksemplets retningslinjer

Sørg for at rette værdierne i følgende attributter, så de svarer til din løsning:

for
id
name
aria-describedby

Tekstområde med karakterbegrænsning

Vis dette eksempel i et nyt vindue

<div class="form-group form-error form-limit" data-maxlength="50">
    <label class="form-label" for="textarea-limit-error">Karakterbegrænsning med
        fejlmeddelelse</label>

    <span class="form-error-message" id="textarea-limit-error-error">
        <span class="sr-only">Fejl: </span>Du kan maks. taste 50 tegn
    </span>
    <textarea class="form-input" id="textarea-limit-error" name="textarea-limit-error" rows="3" required aria-describedby="textarea-limit-error-error textarea-limit-error-limit-message">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
    <span id="textarea-limit-error-limit-message" class="sr-only">Du kan indtaste op til 50
        tegn</span>
    <span class="form-hint character-limit" aria-hidden="true">Du har 50 tegn tilbage</span>
    <span class="character-limit-sr-only sr-only" aria-live="polite">Du har 50 tegn
        tilbage</span>
</div>

Gå til eksemplets retningslinjer

Tjekboks

Vis dette eksempel i et nyt vindue

<div class="form-group form-error">
    <fieldset aria-describedby="example-nationalitet-error">
        <legend class="form-label">
            Hvad er din nationalitet?
        </legend>

        <span class="form-error-message" id="example-nationalitet-error">
            <span class="sr-only">Fejl: </span>Angiv om du er dansk, svensk eller anden
            nationalitet
        </span>

        <div class="form-group-checkbox">
            <input type="checkbox" id="example-nationalitet-option1" name="nationalitet[]"
                class="form-checkbox" value="dansk">
            <label class="form-label" for="example-nationalitet-option1">Dansk</label>

        </div>

        <div class="form-group-checkbox">
            <input type="checkbox" id="example-nationalitet-option2" name="nationalitet[]"
                class="form-checkbox" value="svensk">
            <label class="form-label" for="example-nationalitet-option2">Svensk</label>

        </div>

        <div class="form-group-checkbox">
            <input type="checkbox" id="example-nationalitet-option3" name="nationalitet[]"
                class="form-checkbox" value="anden">
            <label class="form-label" for="example-nationalitet-option3">Anden
                nationalitet</label>

        </div>

    </fieldset>
</div>

Gå til eksemplets retningslinjer

Vedhæft fil

Vis dette eksempel i et nyt vindue

<div class="form-group file-input form-error">
    <label class="form-label" for="form-fileinput-error">Vedhæft fil</label>
    <span class="form-error-message mb-3" id="fileinput-error"><span
            class="sr-only">Fejl:</span> Filens størrelse skal være under 2MB</span>
    <input type="file" id="form-fileinput-error" name="file"
        aria-describedby="fileinput-error">
</div>

Gå til eksemplets retningslinjer

Referencer

Web Component-koden er i beta

Læs mere om Web Components i beta-version. Hvis du har forslag til forbedringer eller kommentarer, kan du oprette et issue på GitHub eller sende en e-mail til FDS-teamet.

Om denne komponent

Fejlmeddelelse er en “mikrokomponent”, der udelukkende anvendes sammen med andre udvalgte webkomponenter. De kompatible komponenter er listet nedenunder.

Varianter

Accordions

Åbn eksempel i nyt vindue

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-accordion-group heading-level="h4">
    <fds-accordion heading="Lorem ipsum dolor sit amet" content-id="accordion-error-1">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Consectetur adipiscing elit" content-id="accordion-error-2" variant-text="Fejl" variant-icon="error" has-error="true">
        <div>
            <fds-alert variant="error">
                <p slot="content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
            </fds-alert>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Sed do eiusmod tempor" content-id="accordion-error-3">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Labore et dolore magna" content-id="accordion-error-4">
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
</fds-accordion-group>
                        
                    
                    
                        
                            <fds-accordion-group heading-level="h4">
    <fds-accordion heading="Lorem ipsum dolor sit amet" content-id="accordion-error-1" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-error-1">
                <span class="accordion-title">Lorem ipsum dolor sit amet</span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-error-1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Consectetur adipiscing elit" content-id="accordion-error-2" variant-text="Fejl" variant-icon="error" has-error="true" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-error-2">
                <span class="accordion-title">Consectetur adipiscing elit</span>
                <span class="accordion-icon">
                    <span class="icon_text">Fejl</span>
                    <svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#error"></use></svg>
                </span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-error-2">
            <fds-alert variant="error" data-visibility="visible">
                <p slot="content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
            </fds-alert>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Sed do eiusmod tempor" content-id="accordion-error-3" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-error-3">
                <span class="accordion-title">Sed do eiusmod tempor</span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-error-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Labore et dolore magna" content-id="accordion-error-4" heading-level="h4">
        <h4>
            <button class="accordion-button" type="button" aria-expanded="false" aria-controls="accordion-error-4">
                <span class="accordion-title">Labore et dolore magna</span>
            </button>
        </h4>
        <div class="accordion-content" aria-hidden="true" id="accordion-error-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </fds-accordion>
</fds-accordion-group>
                        
                    
                
                    
                

Datofelter

Åbn eksempel i nyt vindue

Indtast dato

Dag

Måned

År

Der er sket en fejl

Indtast dato

Dag

Måned

År

Fejl i indtastet dag og år

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-date-input>
    <fieldset>
        <legend>Indtast dato</legend>
        <div>
            <div data-attribute="day">
                <label>Dag</label>
                <input name="day" id="dat-day-450e93ab">
            </div>
            <div data-attribute="month">
                <label>Måned</label>
                <input name="month" id="dat-month-bc1fc9e8">
            </div>
            <div data-attribute="year">
                <label>År</label>
                <input name="year" id="dat-year-4783fc19">
            </div>
        </div>
        <fds-error-message id="errore8d9ef0e">Der er sket en fejl</fds-error-message>
    </fieldset>
</fds-date-input>

<fds-date-input>
    <fieldset>
        <legend>Indtast dato</legend>
        <div>
            <div data-attribute="day">
                <label>Dag</label>
                <input name="day" id="dat-day-1ab610af">
            </div>
            <div data-attribute="month">
                <label>Måned</label>
                <input name="month" id="dat-month-2b9149d1">
            </div>
            <div data-attribute="year">
                <label>År</label>
                <input name="year" id="dat-year-5572ff30">
            </div>
        </div>
        <fds-error-message targets="day, year" id="errorcafee2aa">Fejl i indtastet dag og år</fds-error-message>
    </fieldset>
</fds-date-input>
                        
                    
                    
                        
                            <fds-date-input>
    <fieldset aria-describedby="errore8d9ef0e">
        <legend>Indtast dato</legend>
        <div>
            <div data-attribute="day">
                <label for="dat-day-450e93ab">Dag</label>
                <input name="day" id="dat-day-450e93ab" type="number">
            </div>
            <div data-attribute="month">
                <label for="dat-month-bc1fc9e8">Måned</label>
                <input name="month" id="dat-month-bc1fc9e8" type="number">
            </div>
            <div data-attribute="year">
                <label for="dat-year-4783fc19">År</label>
                <input name="year" id="dat-year-4783fc19" type="number">
            </div>
        </div>
        <fds-error-message id="errore8d9ef0e">
            <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
            <span class="visible-message">Der er sket en fejl</span>
        </fds-error-message>
    </fieldset>
</fds-date-input>
<fds-date-input>
    <fieldset aria-describedby="errorcafee2aa">
        <legend>Indtast dato</legend>
        <div>
            <div data-attribute="day">
                <label for="dat-day-1ab610af">Dag</label>
                <input name="day" id="dat-day-1ab610af" type="number" aria-invalid="true">
            </div>
            <div data-attribute="month">
                <label for="dat-month-2b9149d1">Måned</label>
                <input name="month" id="dat-month-2b9149d1" type="number">
            </div>
            <div data-attribute="year">
                <label for="dat-year-5572ff30">År</label>
                <input name="year" id="dat-year-5572ff30" type="number" aria-invalid="true">
            </div>
        </div>
        <fds-error-message targets="day, year" id="errorcafee2aa">
            <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
            <span class="visible-message">Fejl i indtastet dag og år</span>
        </fds-error-message>
    </fieldset>
</fds-date-input>
                        
                    
                
                    
                

Datovælger

Åbn eksempel i nyt vindue

Datovælger med fejl

Dette er en fejl

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-date-picker>
    <label>Datovælger med fejl</label>
    <div>
        <input type="text" name="input-text" id="ce-datepicker-example-error">
        <div><fds-date-picker-grid></fds-date-picker-grid></div>
    </div>
    <fds-error-message id="error1">Dette er en fejl</fds-error-message>
</fds-date-picker>
                        
                    
                    
                        
                            <fds-date-picker>
    <label for="ce-datepicker-example-error">Datovælger med fejl</label>
    <div class="input-wrapper">
        <input type="text" name="input-text" id="ce-datepicker-example-error" aria-describedby="error1" aria-invalid="true">
        <button aria-haspopup="dialog" class="button button-icon-only date-button" aria-label="Åbn datovælger" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"></path>
            </svg>
        </button>
        <div class="ce-date-picker d-none" role="dialog" aria-modal="false">
            <fds-date-picker-grid></fds-date-picker-grid>
            <div tabindex="-1">
                <button type="button" class="close-button function-link">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" focusable="false" aria-hidden="true" class="icon-svg">
                        <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"></path>
                    </svg>Luk
                </button>
            </div>
        </div>
    </div>
    <fds-error-message id="error1">
        <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
        <span class="visible-message">Dette er en fejl</span>
    </fds-error-message>
</fds-date-picker>
                        
                    
                
                    
                

Åbn eksempel i nyt vindue

Label

Dette er en fejl

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-select>
    <label>Label</label>
    <select name="select2" id="sel7fb9c025">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
    <fds-error-message id="error13365e97">Dette er en fejl</fds-error-message>
</fds-select>
                        
                    
                    
                        
                            <fds-select>
    <label for="sel7fb9c025">Label</label>
    <select name="select2" id="sel7fb9c025" aria-describedby="error13365e97" aria-invalid="true">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
    <fds-error-message id="error13365e97">
        <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
        <span class="visible-message">Dette er en fejl</span>
    </fds-error-message>
</fds-select>
                        
                    
                
                    
                

Inputfelt

Åbn eksempel i nyt vindue

Inputfelt med label

Feltet er ikke udfyldt

                    Web Component
                    Genereret HTML

                            <fds-input>
    <label>Inputfelt med label</label>
    <input type="text" id="input-wrapper-error" name="input-text" required>
    <fds-error-message id="error77d50f36">Feltet er ikke udfyldt</fds-error-message>
</fds-input>
                        
                            <fds-input>
    <label for="input-wrapper-error">Inputfelt med label</label>
    <input type="text" id="input-wrapper-error" name="input-text" required="" aria-describedby="error77d50f36" aria-invalid="true">
    <fds-error-message id="error77d50f36">
        <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
        <span class="visible-message">Feltet er ikke udfyldt</span>
    </fds-error-message>
</fds-input>

Radioknapper

Åbn eksempel i nyt vindue

Radioknapgruppe med fejl

Radioknap 1

Radioknap 2

Radioknap 3

Vælg en mulighed

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-radio-button-group>
    <fieldset>
        <legend>Radioknapgruppe med fejl</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v1" id="radio-button-fejl1">
            <label>Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v2" id="radio-button-fejl2">
            <label>Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v3" id="radio-button-fejl3">
            <label>Radioknap 3</label>
        </fds-radio-button>
        <fds-error-message id="errora9bcb9f4">Vælg en mulighed</fds-error-message>
    </fieldset>
</fds-radio-button-group>
                        
                    
                    
                        
                            <fds-radio-button-group>
    <fieldset aria-describedby="errora9bcb9f4">
        <legend>Radioknapgruppe med fejl</legend>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v1" id="radio-button-fejl1" class="form-radio">
            <label class="form-label" for="radio-button-fejl1">Radioknap 1</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v2" id="radio-button-fejl2" class="form-radio">
            <label class="form-label" for="radio-button-fejl2">Radioknap 2</label>
        </fds-radio-button>
        <fds-radio-button>
            <input type="radio" name="fds-radio-error-example" value="v3" id="radio-button-fejl3" class="form-radio">
            <label class="form-label" for="radio-button-fejl3">Radioknap 3</label>
        </fds-radio-button>
        <fds-error-message id="errora9bcb9f4">
            <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
            <span class="visible-message">Vælg en mulighed</span>
        </fds-error-message>
    </fieldset>
</fds-radio-button-group>
                        
                    
                
                    
                

Tekstområde

Åbn eksempel i nyt vindue

Tekstområde med fejl

Dette er en fejl

                    Web Component
                    Genereret HTML

                            <fds-textarea>
    <label>Tekstområde med fejl</label>
    <textarea id="input-textarea-error" name="input-textarea" rows="5"></textarea>
    <fds-error-message id="error77d50f3d">Dette er en fejl</fds-error-message>
</fds-textarea>

                            <fds-textarea>
    <label for="input-textarea-error">Tekstområde med fejl</label>
    <textarea id="input-textarea-error" name="input-textarea" rows="5" aria-describedby="error77d50f3d" aria-invalid="true"></textarea>
    <fds-error-message id="error77d50f3d">
        <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
        <span class="visible-message">Dette er en fejl</span>
    </fds-error-message>
</fds-textarea>

Tjekboks

Åbn eksempel i nyt vindue

Group label

Første tjekboks

Anden tjekboks

Vælg mindst én tjekboks

                    Web Component
                    Genereret HTML

                    
                        
                            <fds-checkbox-group>
    <fieldset>
        <legend class="form-label">Group label</legend>

        <fds-checkbox>
            <input type="checkbox" name="checkbox-example-9144773b" value="v1" id="chk95b7e42c">
            <label>Første tjekboks</label>
        </fds-checkbox>

        <fds-checkbox>
            <input type="checkbox" name="checkbox-example-9144773b" value="v2" id="chkac82adda">
            <label>Anden tjekboks</label>
        </fds-checkbox>

        <fds-error-message id="error9c8e8ffc">Vælg mindst én tjekboks</fds-error-message>
    </fieldset>
</fds-checkbox-group>

                        
                    
                    
                        
                            <fds-checkbox-group>
    <fieldset aria-describedby="error9c8e8ffc">
        <legend class="form-label">Group label</legend>
        <fds-checkbox>
            <input type="checkbox" name="checkbox-example-9144773b" value="v1" id="chk95b7e42c" class="form-checkbox">
            <label class="form-label" for="chk95b7e42c">Første tjekboks</label>
        </fds-checkbox>
        <fds-checkbox>
            <input type="checkbox" name="checkbox-example-9144773b" value="v2" id="chkac82adda" class="form-checkbox">
            <label class="form-label" for="chkac82adda">Anden tjekboks</label>
        </fds-checkbox>
        <fds-error-message id="error9c8e8ffc">
            <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
            <span class="visible-message">Vælg mindst én tjekboks</span>
        </fds-error-message>
    </fieldset>
</fds-checkbox-group>
                        
                    
                
                    
                

Web Components i beta-version

Fejlmeddelelser

Denne komponent er opdateret i Web Component-versionen

Sådan bruges komponenten

Anvendes til

Anvendes ikke til

Vejledning

Skriv klart og præcist

Vær konsistent

Vær præcis

Brug instruktioner og beskrivelser

Sådan (do)

Ikke sådan (don't)

Varianter

Accordions

Lorem ipsum dolor sit amet Fejl

Datofelter

Datovælger

Dropdown

Inputfelt

Inputfelt med suffix

Inputfelt med karakterbegrænsning

Multiselect

Radioknapper

Tekstområde

Tekstområde med karakterbegrænsning

Tjekboks

Vedhæft fil

Ingen fil er valgt

Den valgte fil er forkert filtype

Filen er for stor

Filen er tom

Filen indeholder en virus

Filen er beskyttet af en adgangskode

Der var en fejl, og filen ikke kunne uploades

Der er en begrænsning på antal filer brugeren kan vælge

Der ikke er brugt den korrekte skabelon

Se komponenten i eksempelløsninger

Referencer

Installation

HTML Struktur

Accordions

Datofelter

Datovælger

Dropdown

Inputfelt

Inputfelt med suffix

Inputfelt med karakterbegrænsning

Multiselect

Radioknapper

Tekstområde

Tekstområde med karakterbegrænsning

Tjekboks

Vedhæft fil

Referencer

Web Component-koden er i beta

Om denne komponent

Varianter

Accordions

Datofelter

Datovælger

Dropdown

Inputfelt

Radioknapper

Tekstområde

Tjekboks