Kode

Fejlmeddelelser

Accordions
Datofelter
Datovælger
Dropdown
Inputfelt
Radioknapper
Tekstområde
Tjekboks
Vedhæft fil

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

Eksempler og retningslinjer

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.

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

Varianter

Accordions

Vis dette eksempel i et nyt vindue

<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

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

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>

Vis dette eksempel i et nyt vindue

<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

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

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>

Radioknapper

Vis dette eksempel i et nyt vindue

<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

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>

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

for
id
name
aria-describedby

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

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>

Vælg et tema

Fejlmeddelelser

Eksempler og retningslinjer

Installation

HTML Struktur

Varianter

Accordions

Datofelter

Datovælger

Dropdown

Inputfelt

Inputfelt med suffix

Radioknapper

Tekstområde

Tjekboks

Vedhæft fil