Kode

Felter

Inputfelt med label

Eksempler og retningslinjer

Installation

HTML Struktur

<div class="form-group">
    <label class="form-label " for="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

Felt med fejlmeddelelse

Vis dette eksempel i et nyt vindue

<div class="form-group form-error">
    <label class="form-label " for="form-error">
        Inputfelt med fejl
    </label>
    <span class="form-hint" id="form-error-hint">
        Fx 12345678
    </span>
    <span class="form-error-message" id="form-error-error">
        <span class="sr-only">Fejl:</span> 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-hint form-error-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

Felt med frivillig indtastning

Vis dette eksempel i et nyt vindue

<div class="form-group">
    <label class="form-label" for="input-optional1">
        Label
    </label>

    <input class="form-input" id="input-optional1" name="input-optional1"
        type="text" />
</div>
<div class="form-group">
    <label class="form-label" for="input-mandatory">
        Label<span class="weight-normal"> (*skal udfyldes)</span>
    </label>

    <input class="form-input" id="input-mandatory" name="input-mandatory"
        type="text" required />
</div>
<div class="form-group">
    <label class="form-label" for="input-optional2">
        Label
    </label>

    <input class="form-input" id="input-optional2" name="input-optional2"
        type="text" />
</div>
<div class="form-group">
    <label class="form-label" for="input-optional3">
        Label
    </label>

    <input class="form-input" id="input-optional3" name="input-optional3"
        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.

Felt med hjælpetekst

Vis dette eksempel i et nyt vindue

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

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

Deaktiveret felt

Vis dette eksempel i et nyt vindue

<div class="form-group">
    <label class="form-label " for="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>

Read-only felt

Vis dette eksempel i et nyt vindue

<div class="form-group">
    <label class="form-label " for="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>

Prefix og suffix

Vis dette eksempel i et nyt vindue

<div class="form-group">
    <label class="form-label" for="input-antal">
        Antal
    </label>

    <div class="form-input-wrapper form-input-wrapper--suffix"><input
            class="form-input input-char-8" id="input-antal" value="56"
            name="input-antal" type="number" required />
        <div class="form-input-suffix" aria-hidden="true">stk.</div>
    </div>
</div>
<div class="form-group">
    <label class="form-label" for="input-pris">
        Pris i 1000 kr.
    </label>

    <div class="form-input-wrapper form-input-wrapper--suffix"><input
            class="form-input input-char-11" id="input-pris" value="123"
            name="input-pris" type="number" required />
        <div class="form-input-suffix" aria-hidden="true">.000 kr</div>
    </div>
</div>
<div class="form-group">
    <label class="form-label" for="input-beloeb">
        Beløb i €
    </label>

    <div class="form-input-wrapper form-input-wrapper--prefix">
        <div class="form-input-prefix" aria-hidden="true">€</div><input
            class="form-input input-width-xs" id="input-beloeb"
            value="1.234" name="input-beloeb" type="number" required />
    </div>
</div>
<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>

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.