Kode

Felter

Eksempler og retningslinjer

• Retningslinjer
• Eksempler

Installation

HTML Struktur

<div class="form-group">
    <label class="form-label " for="input-type-text"
        id="form-label-input-type-text">
        Inputfelt med label
    </label>

    <input class="form-input   " required id="input-type-text" value=""
        name="input-type-text" type="text">
</div>

Varianter

Fejlbesked

<div class="form-group form-error">
    <label class="form-label " for="form-error" id="form-label-form-error">
        Inputfelt med fejl
    </label>
    <span class="form-hint" id="input-hint-message-form-error">
        Fx 12345678
    </span>
    <span class="form-error-message" id="form-error-message-form-error"
        role="alert">
        Hjælpsom fejlbesked
    </span>
    <input class="form-input   " required id="form-error" value=""
        name="form-error" type="text" aria-invalid="true"
        aria-describedby="form-error-message-form-error"
        aria-labelledby="form-label-form-error input-hint-message-form-error">
</div>

Sørg for at rette i de nødvendige attributter, så værdierne er unikke og refererer til de rette elementer:

• for
• id
• name
• aria-labelledby
• aria-describedby

Frivilligt felt

<div class="form-group">
    <label class="form-label " for="input-optional"
        id="form-label-input-optional">
        Inputfelt som er valgfrit<span class="weight-normal">
            (frivilligt)</span>
    </label>

    <input class="form-input   " id="input-optional" value=""
        name="input-optional" type="text">
</div>

De fleste felter i en selvbetjeningsløsning er påkrævet, så for at undgå mange af de standard røde stjerner ved hvert felt har vi i stedet valgt at skrive (frivilligt) ved de felter, som ikke er påkrævede.

Hjælpetekst

<div class="form-group">
    <label class="form-label " for="input-type-text"
        id="form-label-input-type-text">
        Inputfelt med label og hjælpetekst
    </label>
    <span class="form-hint" id="input-hint-message-input-type-text">
        Fx 12345678
    </span>

    <input class="form-input   " required id="input-type-text" value=""
        name="input-type-text" type="text"
        aria-labelledby="form-label-input-type-text input-hint-message-input-type-text">
</div>

Feltbredde

Inputfelter har en standard bredde på 32rem, for at ændre bredden på inputfelter bruges nedenstående klasser:

• input-width-xxs har en bredde på 8rem
• input-width-xs har en bredde på 16rem
• input-width-s har en bredde på 24rem
• input-width-m har en bredde på 32rem
• input-width-l har en bredde på 40rem
• input-width-xl har en bredde på 48rem

Bredde med tegn

For at styre bredden på inputfelter efter tegn, skal der i stedet bruges nedenstående klasser:

• input-char-4 har en bredde der passer til 4 tegn
• input-char-8 har en bredde der passer til 8 tegn
• input-char-11 har en bredde der passer til 11 tegn
• input-char-27 har en bredde der passer til 27 tegn

For at tilføje flere input bredder, der er styret af tegn, skal der tilføjes klassen input-char-X, hvor det nye tal skal erstattes med X.

Deaktiveret

<div class="form-group">
    <label class="form-label " for="input-disabled"
        id="form-label-input-disabled">
        Inputfelt som er låst
    </label>

    <input class="form-input   " required id="input-disabled" value=""
        name="input-disabled" type="text" disabled="disabled">
</div>

Readonly

<div class="form-group">
    <label class="form-label " for="input-readonly"
        id="form-label-input-readonly">
        Inputfelt som er readonly
    </label>

    <input class="form-input   " required id="input-readonly"
        value="012345-6789" name="input-readonly" type="text" readonly>
</div>