Gå til sidens indhold

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

Eksempel på fejlmeddelelser
Fejl: Skriv dit fulde navn, og adskil for- og efternavne med mellemrum, fx Anders Andersen

Eksempler og retningslinjer

Installation

HTML Struktur

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

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

Kodeeksempel
<ul class="accordion">
    <li>
        <h3>
            <button class="accordion-button accordion-error " aria-expanded="true"
                aria-describedby="error-example-accordion1-error"
                aria-controls="error-example-accordion1">
                Lorem ipsum dolor sit amet
                <span class="accordion-icon">
                    <span class="icon_text">Fejl</span>
                    <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#highlight-off"></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'>
                <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>

Datofelter

Kodeeksempel
<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 js-calendar-group mt-3">

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

                <input type="tel" id="date-input-error-example-day"
                    class="form-input js-calendar-day-input" value="01" required data-min="1"
                    data-max="31" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$" title="Indtast dag på måneden som tal">
            </div>

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

                <input type="tel" id="date-input-error-example-month"
                    class="form-input js-calendar-month-input" value="12" required
                    data-min="1" data-max="12" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$" title="Indtast månedens nummer">
            </div>

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

                <input type="tel" id="date-input-error-example-year"
                    class="form-input js-calendar-year-input" value="2076" required
                    data-min="1900" data-max="3000" maxlength="4" pattern="^[0-9]{0,4}$"
                    data-input-regex="^[0-9]{0,4}$" title="Indtast årstal">
            </div>

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

Datovælger

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

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

Inputfelt med suffix

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

Kodeeksempel
<div class="form-group form-error">
    <fieldset role="radiogroup" aria-describedby="radiogroup-error-error "
        aria-invalid="true">
        <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 radio-large" 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 radio-large" 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 radio-large" value="forsikringsselskab">
            <label class="form-label"
                for="radiogroup-error-option3">Forsikringsselskab</label>

        </div>

    </fieldset>
</div>

Tekstområde

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

Tjekboks

Kodeeksempel
<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 checkbox-large" 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 checkbox-large" 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 checkbox-large" value="anden">
            <label class="form-label" for="example-nationalitet-option3">Anden
                nationalitet</label>

        </div>

    </fieldset>
</div>

Vedhæft fil

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