Kode

Fejlmeddelelser

Accordions
Datofelter
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 class="form-input" id="form-error" name="form-error"
        type="text" 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 accordion-multiselectable">
    <li><button class="accordion-button accordion-error "
            aria-expanded="true" aria-describedby="error-a1"
            aria-controls="error-a1">
            Lorem ipsum dolor sit amet
            <span class="accordion-icon">
                <span class="icon_text">Fejl</span>
                <svg class="icon-svg" aria-hidden="true"><use xlink:href="#highlight-off"></use></svg>
            </span>
        </button>

        <div id="error-a1" aria-hidden="false" class="accordion-content">
            <div class="alert alert-error" role="alert">
                <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="example-date-field-error-helptext example-date-field-error">
        <legend class="form-label">Hvornår blev dit pas udstedt?</legend>
        <span class="form-hint" id="example-date-field-error-helptext">Fx:
            05 12 2018</span>
        <span class="form-error-message "
            id="example-date-field-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-day-error">Dag</label>
                <input class="form-input js-calendar-day-input"
                    id="date-day-error" value="01" type="tel" data-min="1"
                    data-max="31" maxlength="2" pattern="^[0-9]{0,2}$"
                    data-input-regex="^[0-9]{0,2}$"
                    title="Indskriv dag på måneden som tal"
                    aria-describedby="example-date-field-error-helptext" />
            </div>
            <div class="form-group form-group-month">
                <label class="form-label"
                    for="date-month-error">Måned</label>
                <input class="form-input js-calendar-month-input"
                    id="date-month-error" value="12" type="tel"
                    data-min="1" data-max="12" maxlength="2"
                    pattern="^[0-9]{0,2}$" data-input-regex="^[0-9]{0,2}$"
                    title="Indskriv månedens nummer"
                    aria-describedby="example-date-field-error-helptext" />
            </div>
            <div class="form-group form-group-year ">
                <label class="form-label" for="date-year-error">År</label>
                <input class="form-input js-calendar-year-input"
                    id="date-year-error" value="2076" type="tel"
                    data-min="1900" data-max="3000" maxlength="4"
                    pattern="^[0-9]{0,4}$" data-input-regex="^[0-9]{0,4}$"
                    title="Indskriv årstal"
                    aria-describedby="example-date-field-error-helptext" />
            </div>

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

Vis dette eksempel i et nyt vindue

<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

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 class="form-input" id="fullname-error-example"
        name="fullname-error-example" type="text" 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
            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

Vis dette eksempel i et nyt vindue

<div class="form-group form-error">
    <fieldset aria-describedby="example-radiobutton-error">
        <legend class="h5">Sagen handler om</legend>
        <span class="form-error-message"
            id="example-radiobutton-error"><span
                class="sr-only">Fejl:</span> Vælg hvad sagen handler
            om</span>
        <ul class="nobullet-list">
            <li>
                <div class="form-group-radio">
                    <input id="sagen-omhandler-ulykkesforsikring"
                        type="radio" name="sagen-omhandler"
                        value="ulykkesforsikring"
                        class="form-radio radio-large " />
                    <label for="sagen-omhandler-ulykkesforsikring"
                        id="form-label-sagen-omhandler-ulykkesforsikring"
                        class="">Ulykkesforsikring (ASL §81) </label>

                </div>
            </li>
            <li>
                <div class="form-group-radio">
                    <input id="sagen-omhandler-erstatningsansvar"
                        type="radio" name="sagen-omhandler"
                        value="erstatningsansvar"
                        class="form-radio radio-large " />
                    <label for="sagen-omhandler-erstatningsansvar"
                        id="form-label-sagen-omhandler-erstatningsansvar"
                        class="">Erstatningsansvar (ASL §10) </label>

                </div>
            </li>
            <li>
                <div class="form-group-radio">
                    <input id="sagen-omhandler-forsikringsselskab"
                        type="radio" name="sagen-omhandler"
                        value="forsikringsselskab"
                        class="form-radio radio-large " />
                    <label for="sagen-omhandler-forsikringsselskab"
                        id="form-label-sagen-omhandler-forsikringsselskab"
                        class="">Forsikringsselskab (ASL §10) </label>

                </div>
            </li>
        </ul>
    </fieldset>
</div>

Tekstområde

Vis dette eksempel i et nyt vindue

<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

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>
        <ul class="nobullet-list">
            <li>
                <input id="nationalitet1" type="checkbox"
                    name="nationalitet" value="dansk"
                    class="form-checkbox checkbox-large " />
                <label for="nationalitet1" class="">Dansk</label>
            </li>
            <li>
                <input id="nationalitet2" type="checkbox"
                    name="nationalitet[]" value="svensk"
                    class="form-checkbox checkbox-large " />
                <label for="nationalitet2" class="">Svensk</label>
            </li>
            <li>
                <input id="nationalitet3" type="checkbox"
                    name="nationalitet[]" value="anden"
                    class="form-checkbox checkbox-large " />
                <label for="nationalitet3" class="">Anden
                    nationalitet</label>
            </li>
        </ul>
    </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>