Vælg et tema
LukVælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Felter
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
<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
<div class="form-group">
<label class="form-label " for="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.
Felt med hjælpetekst
<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
<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
<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>
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å 8reminput-width-xs
har en bredde på 16reminput-width-s
har en bredde på 24reminput-width-m
har en bredde på 32reminput-width-l
har en bredde på 40reminput-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 tegninput-char-8
har en bredde der passer til 8 tegninput-char-11
har en bredde der passer til 11 tegninput-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.