Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Inputfelter
Inputfelter lader brugeren indtaste kort information.
Sådan bruges komponenten
Anvendes til
Brug til input af information i form af bogstaver og tal eller en kombination af begge.
Brug inputfelter når det er nemmere for brugeren at skrive information end at vælge den på anden vis.
Brug når brugeren skal kunne copy paste information ind i en formular.
Anvendes ikke til
Når brugeren skal vælge ud fra et prædefineret sæt af værdier (fx nogle få bestemte datoer) eller hvis der er strenge krav til datakonsistens, oftest i en løsning uden klientside validering (hvis brugerens input-format kan skabe fejl på serversiden).
Vejledning
Brug primært formularelementer, når der er behov for, at brugeren kan tilføje information, som ikke kan vælges ud fra prædefinerede værdier, eller som løsningen ikke automatisk kan forudse ud fra brugerens andre indtastninger.
Vis kun fejlmeddelelser, når brugeren har indtastet en ugyldig værdi.
Fejlmeddelelser skal være meningsfulde og hjælpsomme.
Placér fejlmeddelelser mellem label og feltet, som bliver markeret med rødt.
Inputfelter er ikke perfekte til mobile løsninger. Overvej om de er nødvendige eller om du kan tilbyde brugeren en anden form for interaktion.
Brug feltbredden til at begrænse antallet af tegn i et felt. Feltbredden angiver det forventede omfang af tegn, så brugeren får en fornemmelse af, hvad der skal indtastes. Fx bør et felt, hvor man skal angive et dansk postnummer, kun være 4 tegn bredt, mens et felt til et gadenavn bør være på minimum 27 tegn.
Brug ikke feltbredde til at validere brugerens input. Angiv i stedet krav til inputvalidering i en vejledning.
Feltets bredde skal modsvare det, du forventer at brugeren skal indtaste, så brugeren kan se alle tegn under indtastningen.
Sådan (do)
Sådan: Brug inputfelter, når der er mange gyldige svarmuligheder, som ikke kan opstilles på forhånd, og når mange typer svar er acceptable. (ISO, 2012, afsnit 8.5).
Ikke sådan (don't)
Ikke sådan: Undlad at bruge inputfelter til information, som lettere kan vælges ud fra prædefinerede værdier (ISO 9241-143, afsnit 8.5), og som brugerne let indtaster forkert (Miller & Jarrett, 2001).
Sådan (do)
Sådan: Placér labels over formularens felter – tættere på de felter, de hører til, end på andre felter (Silver, 2018, s. 31-32). Placeringen over felterne gør formularen hurtigere at skanne, fordi øjet ikke behøver at bevæge sig frem og tilbage mellem label og indtastningsfelt, som det skulle, hvis labelen var placeret til venstre for feltet (McCloskey, 2013).
Ikke sådan (don't)
Ikke sådan: Undlad at placere labels inde i formularens felter. Formularens labels er afsenderens anmodninger eller spørgsmål, mens felterne bør være forbeholdt brugernes svar (Jarrett, 2013). En label inde i felt kan medføre, at brugerne fejlfortolker labelen som autoudfyldt data, og at feltet slet ikke ligner et indtastningsfelt (Sherwin, 2014-2018).
Fejlmeddelelse
Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.
Når der vises en fejlmeddelelse, vis da også fejlopsummering.
Varianter
Hjælpetekst
Sådan (do)
Sådan: Placér indlejret hjælpetekst sammen med labelen (Sherwin, 2014-2018). På grund af menneskets svage perifere syn, kan brugerne kun se skarpt i en diameter på 2-4 cm ved en computerskærm (Johnson, 2014, s. 54). Hvis hjælpeteksten ikke står tæt på labelen, vil brugerne derfor måske ikke opdage den.
Ikke sådan (don't)
Ikke sådan: Undlad at placere hjælpetekster under felter, hvor de er svære at få øje på. Undgå også at placere dem inde i indtastningsfelterne, hvor de forsvinder, når brugerne begynder at taste (Sherwin, 2014-2018).
Obligatoriske og frivillige inputfelter
Undgå frivillige inputfelter så vidt muligt. Hvis et felt er frivilligt, så overvej altid, om det er nødvendigt at have med i formularen.
Hvis en formular indeholder frivillige inputfelter, som vil have en betydelig positiv effekt for brugeren, kan dette forklares i en hjælpetekst. Det kan f.eks. være tilfældet med inputfelter, der forkorter tiden for en sagsbehandling betragteligt, hvis de bliver udfyldt.
Når der er flest obligatoriske inputfelter
I de fleste tilfælde bør der være flere obligatoriske end frivillige inputfelter. Marker da de frivillige felter i formularen.
Når der er flest frivillige inputfelter
Hvis en formular indeholder flere frivillige end obligatoriske inputfelter, fremhæves de obligatoriske felter i stedet for de frivillige.
Read-only
Deaktiveret
Bemærk, at deaktiverede inputfelter hverken har kontrastkrav eller kan få fokus og dermed kan være svære at opdage, fx når man anvender en skærmlæser. Det anbefales derfor, at man helt undlader inputfeltet i stedet for at deaktivere det.
Prefix og suffix
Prefix og suffix kan bruges til at tydeliggøre, hvordan brugeren skal angive bestemte data såsom beløb, antal m.m.
Et suffix må aldrig være den eneste indikator for, hvordan et felt skal udfyldes, eftersom det ikke læses højt af skærmlæsere. Feltets label eller en hjælpetekst kan bruges til også at indikere dette.
Karakterbegrænsning
Karakterbegrænsning sætter et maksimalt antal af tegn, som brugeren kan indtaste i et felt. Karakterbegrænsning indikerer løbende overfor brugeren, hvor mange tegn der er tilbage, og hvor mange tegn de evt. har overskredet med.
Vis altid antallet af tegn, der er til rådighed i inputfeltet, inden brugeren begynder at skrive.
Stop ikke indtastningen, når brugeren overskrider antallet af tegn. Vis i stedet løbende med rød tekst under feltet, hvor mange tegn der er overskredet med.
Feltbredde
Sådan (do)
Sådan: Afstem længden af feltet til det, der skal indtastes (Jarrett, 2000). Når et design er intuitivt, signalerer de forskellige elementer, hvordan de skal bruges (Norman, 2013). Et felt til e-mailadresser bør derfor være længere end et felt til telefonnumre. Et felt til postnumre bør være kortere end andre felter (Silver, 2018, s. 81).
Ikke sådan (don't)
Ikke sådan: Undgå felter, der er så korte, at brugernes indtastninger ikke kan ses. Det virker, som at afbryde én, der taler. Undgå også felter, der er meget længere end det input, der forventes. For meget plads kan få brugeren til at tro, at han har misforstået spørgsmålet (Jarrett, 2000; Silver, 2018, s. 82).
Se komponenten i eksempelløsninger
- Formular til kontaktoplysninger: Oplysninger om dig
- Trinformular til registrering: Kontaktoplysninger
- Trinformular til ansøgning: Kontaktoplysninger
- Trinformular til ansøgning: Tilføj dokumentation
Referencer
- ISO 9241-143: Forms (2012)
- Adam Silver: Form Design Patterns (2018)
- Marieke McCloskey: Form Design Quick Fix: Group Form Elements Effectively Using White Space (2013)
- Katie Sherwin: Placeholders in Form Fields Are Harmful (2014-2018)
- Jeff Johnson: Designing with the Mind in Mind, Second Edition (2014)
- Luke Wroblewski: Web Form Design: Filling in the Blanks (2008)
- Caroline Jarrett & Gerry Gaffney: Forms that Work: Designing Web Forms for Usability (2009)
- Caroline Jarrett: Designing usable forms: the three-layer model of the form (2000) (pdf)
- Caroline Jarrett: Don’t Put Labels Inside Text Boxes (Unless You’re Luke W) (2013)
- Don Norman: Don Normans Principles of Design (2013)
Installation
HTML Struktur
<div class="form-group">
<label class="form-label" for="input-text">Inputfelt med label</label>
<input type="text" id="input-text" name="input-text" class="form-input" required>
</div>Brug attributten “autocomplete”
Brug autocomplete på inputfelter for at gøre det hurtigere for brugeren at udfylde formularen samt for at overholde reglerne for tilgængelighed (W3C (WCAG 2.1): Understanding SC 1.3.5: Identify Input Purpose (Level AA)).
Brug autocomplete på inputfelter til fx navn (autocomplete='name'), postnummer (autocomplete='postal-code'), telefonnummer (autocomplete='tel') og e-mailadresse (autocomplete='email'), hvis en bruger skal indtaste disse oplysninger om sig selv i din formular.
<div class="form-group">
<label class="form-label" for="postnr">Postnummer</label>
<input type="text" id="postnr" name="postnr" class="form-input input-char-4" required
autocomplete="postal-code">
</div>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 type="text" id="input-type-help-text" name="input-type-help-text"
class="form-input" aria-describedby="input-type-help-text-hint " required>
</div>Obligatoriske og frivillige inputfelter
<div class="form-group">
<label class="form-label" for="input-optional1">Label</label>
<input type="text" id="input-optional1" name="input-optional1" class="form-input">
</div>
<div class="form-group">
<label class="form-label" for="input-mandatory">Label<span class="weight-normal"> (*skal
udfyldes)</span></label>
<input type="text" id="input-mandatory" name="input-mandatory" class="form-input"
required>
</div>
<div class="form-group">
<label class="form-label" for="input-optional2">Label</label>
<input type="text" id="input-optional2" name="input-optional2" class="form-input">
</div>
<div class="form-group">
<label class="form-label" for="input-optional3">Label</label>
<input type="text" id="input-optional3" name="input-optional3" class="form-input">
</div>Hvis de fleste felter i en selvbetjeningsløsning er påkrævede, noterer man “(frivilligt)” ved de få felter, der ikke er påkrævede. Hvis de fleste felter er frivillige i en løsning, noterer man “(*skal udfyldes)” ved de få felter, der er påkrævede.
Read-only
<div class="form-group">
<label class="form-label" for="input-readonly">Inputfelt som er readonly</label>
<input type="text" id="input-readonly" name="input-readonly" class="form-input"
value="012345-6789" readonly>
</div>Deaktiveret
<div class="form-group">
<label class="form-label disabled" for="input-disabled">Inputfelt som er låst</label>
<input type="text" id="input-disabled" name="input-disabled" class="form-input"
value="Låst indhold" disabled="disabled">
</div>Prefix og suffix
<div class="form-group">
<label class="form-label" for="input-antal">Antal styk</label>
<div class="form-input-wrapper form-input-wrapper--suffix">
<input type="number" id="input-antal" name="input-antal"
class="form-input input-char-8" value="56" 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 type="number" id="input-pris" name="input-pris"
class="form-input input-char-11" value="123" 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 type="number" id="input-beloeb" name="input-beloeb"
class="form-input input-width-xs" value="1.234" required>
</div>
</div>Karakterbegrænsning
<div class="form-group form-limit" data-maxlength="20">
<label class="form-label" for="input-type-text-limit">Inputfelt med
karakterbegrænsning</label>
<input type="text" id="input-type-text-limit" name="input-type-text-limit"
class="form-input" aria-describedby="input-type-text-limit-limit-message" required>
<span id="input-type-text-limit-limit-message" class="sr-only">Du kan indtaste op til 20
tegn</span>
<span class="form-hint character-limit" aria-hidden="true">Du har 20 tegn tilbage</span>
<span class="character-limit-sr-only sr-only" aria-live="polite">Du har 20 tegn
tilbage</span>
</div>Husk at medtage de to beskeder skjult med klassen sr-only. Disse anvendes af skærmlæsere til at give info og status på indtastningen til brugeren.
JavaScript
Karakterbegrænsning kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med init().
Funktioner
| Funktion | Beskrivelse |
|---|---|
| init() | Sørger for at beskederne med antal tegn tilbage opdateres. |
| charactersLeft() | Returnerer det antal tegn, der lige nu kan indtastes i inputfeltet. Tallet er negativt, hvis antallet af tegn er overskredet. |
| updateMessages() | Fremtvinger en opdatering af beskederne med antal tegn tilbage. Dette kan være nyttigt, hvis eksempelvis værdien i inputfeltet ændres programmatisk. |
| silentUpdateMessages() | Fungerer på samme måde som updateMessages(), bortset fra at ændringen ikke læses højt i skærmlæsere. Anvend kun, når ændringer i feltet er meningsforstyrrende for skærmlæserbrugere. |
Eksempel på anvendelse:
const form_limit = new DKFDS.CharacterLimit(document.getElementsByClassName('form-limit')[0]);
form_limit.init();
form_limit.charactersLeft();Sprog
Hvis du ønsker at anvende et andet sprog end dansk i JavaScript-koden til karakterbegrænsning, skal du selv give din oversættelse med og derefter initiere komponenten manuelt. Husk at opdatere værdien i attributten “lang” i din sides html-tag. Indholdet i krøllede parenteser {...} nedenunder skal ikke oversættes eller ændres.
new DKFDS.CharacterLimit(document.getElementById('FORM-LIMIT-ID'), {
"character_remaining": "Du har {value} tegn tilbage",
"characters_remaining": "Du har {value} tegn tilbage",
"character_too_many": "Du har {value} tegn for meget",
"characters_too_many": "Du har {value} tegn for meget"
}).init();Feltbredde
Inputfelter har en standard bredde på 32rem. For at ændre bredden bruges nedenstående klasser:
input-width-xxshar en bredde på 8reminput-width-xshar en bredde på 16reminput-width-shar en bredde på 24reminput-width-mhar en bredde på 32reminput-width-lhar en bredde på 40reminput-width-xlhar 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-4har en bredde der passer til 4 tegninput-char-8har en bredde der passer til 8 tegninput-char-11har en bredde der passer til 11 tegninput-char-27har en bredde der passer til 27 tegn
For at tilføje flere inputbredder, der er styret af tegn, skal der tilføjes klassen input-char-X, hvor det nye tal skal erstattes med X.
Om custom elements
HTML-muligheder
Som udgangspunkt bør man anvende custom element-koden, da denne kommer med JavaScript, der genererer både den nødvendige HTML og funktionalitet.
Hvis man ikke ønsker at benytte custom elements, kan man tage den genererede HTML i stedet. Erstat evt. <fds-input> med <div class="fds-input">. Bemærk, at man i så fald selv er ansvarlig for HTML og funktionalitet.
Eksempler
Inputfelt med label lavet med custom element
<fds-input>
<label>Inputfelt med label</label>
<input type="text" name="input-example" id="custom-element-input-example">
</fds-input><fds-input>
<label for="custom-element-input-example">Inputfelt med label</label>
<input type="text" name="input-example" id="custom-element-input-example">
</fds-input>Både ID og klasser kan undlades, hvormed elementet selv indsætter disse. Elementet kan derfor simplificeres til:
<fds-input>
<label>Inputfelt med label</label>
<input type="text" name="input-example">
</fds-input>Varianter
Fejl
<fds-error-message> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button-group>, <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>. Dette custom-element tilføjer automatisk et fejlikon og strukturerer indholdet, inkluderer korrekte ARIA-attributter og skjulte tilstande samt underretter forælderkomponenten om ændringer i synlighed.
<fds-input>
<label>Inputfelt med label</label>
<input type="text" id="input-wrapper-error" name="input-text" required>
<fds-error-message id="error77d50f36">Feltet er ikke udfyldt</fds-error-message>
</fds-input><fds-input>
<label for="input-wrapper-error">Inputfelt med label</label>
<input type="text" id="input-wrapper-error" name="input-text" required="" aria-describedby="error77d50f36" aria-invalid="true">
<fds-error-message id="error77d50f36">
<svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
<span class="visible-message">Feltet er ikke udfyldt</span>
</fds-error-message>
</fds-input>Attributter til <fds-error-message>
| Attribut | Beskrivelse |
|---|---|
| id | Hvis ikke angivet, genereres der automatisk et id. |
| icon-text | Sæt en anden tekst på fejlikonet. |
| hidden | Styrer synligheden af fejlmeddelelsen. |
Events fra <fds-error-message>
| Event | Beskrivelse |
|---|---|
| error-message-visibility-changed | Afsender en hændelse til forælderkomponenter, når synligheden ændres. |
| error-message-callback | Afsender en hændelse til opdatering af forælderkomponenten. |
Hjælpetekst
<fds-help-text> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button>, <fds-radio-button-group> <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>.
<fds-input>
<label>Inputfelt med label og hjælpetekst</label>
<fds-help-text id="helpTextId">Fx 12345678</fds-help-text>
<input type="text" id="input-wrapper-help-text" name="input-wrapper-help-text" required>
</fds-input><fds-input>
<label for="input-wrapper-help-text">Inputfelt med label og hjælpetekst</label>
<fds-help-text id="helpTextId" class="help-text">Fx 12345678</fds-help-text>
<input type="text" id="input-wrapper-help-text" name="input-wrapper-help-text" required="" aria-describedby="helpTextId">
</fds-input>Attributter til <fds-help-text>
| Attribut | Beskrivelse |
|---|---|
| id | Hvis ikke angivet, genereres der automatisk et id. |
| hidden | Styrer synligheden af hjælpeteksten. |
Events fra <fds-help-text>
| Event | Beskrivelse |
|---|---|
| help-text-callback | Afsender en hændelse til opdatering af forælderkomponenten. |
Obligatoriske og frivillige inputfelter
<fds-input show-required-status>
<label>Label</label>
<input type="text" id="input-wrapper-mandatory1" name="input-wrapper-mandatory1" required>
</fds-input>
<fds-input show-required-status>
<label>Label</label>
<input type="text" id="input-wrapper-optional1" name="input-wrapper-optional1">
</fds-input>
<fds-input show-required-status="Dette felt skal udfyldes">
<label>Label</label>
<input type="text" id="input-wrapper-mandatory2" name="input-wrapper-mandatory2" required>
</fds-input>
<fds-input show-required-status="Ikke nødvendigt">
<label>Label</label>
<input type="text" id="input-wrapper-optional2" name="input-wrapper-optional2">
</fds-input><fds-input show-required-status="">
<label for="input-wrapper-mandatory1">Label<span class="weight-normal"> (*skal udfyldes)</span>
</label>
<input type="text" id="input-wrapper-mandatory1" name="input-wrapper-mandatory1" required="">
</fds-input>
<fds-input show-required-status="">
<label for="input-wrapper-optional1">Label<span class="weight-normal"> (frivilligt)</span>
</label>
<input type="text" id="input-wrapper-optional1" name="input-wrapper-optional1">
</fds-input>
<fds-input show-required-status="Dette felt skal udfyldes">
<label for="input-wrapper-mandatory2">Label<span class="weight-normal"> (*Dette felt skal udfyldes)</span>
</label>
<input type="text" id="input-wrapper-mandatory2" name="input-wrapper-mandatory2" required="">
</fds-input>
<fds-input show-required-status="Ikke nødvendigt">
<label for="input-wrapper-optional2">Label<span class="weight-normal"> (Ikke nødvendigt)</span>
</label>
<input type="text" id="input-wrapper-optional2" name="input-wrapper-optional2">
</fds-input>Read-only
<fds-input>
<label>Inputfelt som er readonly</label>
<input type="text" id="input-wrapper-readonly" name="input-wrapper-readonly" value="012345-6789" readonly>
</fds-input><fds-input>
<label for="input-wrapper-readonly">Inputfelt som er readonly</label>
<input type="text" id="input-wrapper-readonly" name="input-wrapper-readonly" value="012345-6789" readonly="">
</fds-input>Deaktiveret
<fds-input>
<label>Inputfelt som er låst</label>
<input type="text" id="input-wrapper-disabled" name="input-wrapper-disabled" value="Låst indhold" disabled>
</fds-input><fds-input>
<label for="input-wrapper-disabled">Inputfelt som er låst</label>
<input type="text" id="input-wrapper-disabled" name="input-wrapper-disabled" value="Låst indhold" disabled="">
</fds-input>Præfiks og suffiks
Præfiks og suffiks kræver, at man lægger inputfeltet i et custom element kaldet <fds-input-affix>. Dette element kan tage to attributter: input-prefix og input-suffix.
<fds-input>
<label>Antal styk</label>
<fds-input-affix input-prefix="stk.">
<input type="number" id="input-wrapper-antal" name="input-wrapper-antal" class="input-char-8" value="56" required>
</fds-input-affix>
</fds-input>
<fds-input>
<label class="form-label" for="input-wrapper-pris">Pris i 1000 kr.</label>
<fds-input-affix input-suffix="000 kr.">
<input type="number" id="input-wrapper-pris" name="input-wrapper-pris" class="input-char-11" value="123" required>
</fds-input-affix>
</fds-input>
<fds-input>
<label class="form-label" for="input-wrapper-beloeb">Beløb i €</label>
<fds-input-affix input-prefix="€">
<input type="number" id="input-wrapper-beloeb" name="input-wrapper-beloeb" class="input-width-xs" value="1.234" required>
</fds-input-affix>
</fds-input><fds-input>
<label for="input-wrapper-antal">Antal styk</label>
<fds-input-affix input-prefix="stk.">
<div class="form-input-prefix" aria-hidden="true">stk.</div>
<input type="number" id="input-wrapper-antal" name="input-wrapper-antal" class="input-char-8" value="56" required="">
</fds-input-affix>
</fds-input>
<fds-input>
<label class="form-label" for="input-wrapper-pris">Pris i 1000 kr.</label>
<fds-input-affix input-suffix="000 kr.">
<input type="number" id="input-wrapper-pris" name="input-wrapper-pris" class="input-char-11" value="123" required="">
<div class="form-input-suffix" aria-hidden="true">000 kr.</div>
</fds-input-affix>
</fds-input>
<fds-input>
<label class="form-label" for="input-wrapper-beloeb">Beløb i €</label>
<fds-input-affix input-prefix="€">
<div class="form-input-prefix" aria-hidden="true">€</div>
<input type="number" id="input-wrapper-beloeb" name="input-wrapper-beloeb" class="input-width-xs" value="1.234" required="">
</fds-input-affix>
</fds-input>Karakterbegrænsning
<fds-character-limit> viser feedback i realtid om, hvor mange tegn en bruger har tilbage, eller hvor mange tegn en bruger har overskredet den valgte grænse.
Den understøtter brugerdefinerede meddelelser, opdaterer både visuelt og til skærmlæsere og integrerer med <fds-input> og <fds-textarea> for at sikre tilgængelig og ensartet tegntællingsadfærd på tværs af designsystemet.
<fds-input>
<label>Inputfelt med karakterbegrænsning</label>
<input type="text" name="input-wrapper-character-limit" id="inp54a9b8c6">
<fds-character-limit limit="40" limit-id="lim9ef8bf53"></fds-character-limit>
</fds-input><fds-input>
<label for="inp54a9b8c6">Inputfelt med karakterbegrænsning</label>
<input type="text" name="input-wrapper-character-limit" id="inp54a9b8c6">
<fds-character-limit limit="40" limit-id="lim9ef8bf53">
<span class="sr-only" id="lim9ef8bf53">Du kan indtaste op til 40 tegn</span>
<span class="sr-only" aria-hidden="true" aria-live="polite"></span>
<span class="visual-message" aria-hidden="false">Du har 40 tegn tilbage</span>
</fds-character-limit>
</fds-input>Attributter til <fds-character-limit>
| Attribut | Beskrivelse |
|---|---|
| limit | Sæt max antal tegn på inputfeltet. |
| one-character-remaining-text | Sæt en anden tekst, når der er 1 tegn tilbage. Default er "Du har {value} tegn tilbage". |
| several-characters-remaining-text | Sæt en anden tekst, når der er flere end 1 tegn tilbage. Default er "Du har {value} tegn tilbage". |
| one-character-too-many-text | Sæt en anden tekst, når grænsen er overskredet med 1 tegn. Default er "Du har {value} tegn for meget". |
| several-characters-too-many-text | Sæt en anden tekst, når grænsen er overskredet med flere tegn. Default er "Du har {value} tegn for meget". |
| max-limit-text | Sæt en anden tekst for max. antal tegn, der kan indtastes. Default er "Du kan indtaste op til {value} tegn". |
| limit-id | Sæt et id på skærmlæserbeskeden om max. antal tegn. |
Events fra <fds-character-limit>
| Event | Beskrivelse |
|---|---|
| character-limit-connection | Afsendes, når fds-character-limit er forbundet til DOM'en og har fundet sin nærmeste forælder. |
| character-limit-callback | Afsender en hændelse til opdatering af forælderkomponenten. |
Feltbredde
Input bredde med rem
<fds-input input-maxwidth="xxs">
<label>Inputfelt med attributten maxwidth="xxs" (8rem)</label>
<input type="text" id="input-wrapper-text-xxs" name="input-wrapper-text-xxs">
</fds-input>
<fds-input input-maxwidth="xs">
<label>Inputfelt med attributten maxwidth="xs" (16rem)</label>
<input type="text" id="input-wrapper-text-xs" name="input-wrapper-text-xs">
</fds-input>
<fds-input input-maxwidth="s">
<label>Inputfelt med attributten maxwidth="s" (24rem)</label>
<input type="text" id="input-wrapper-text-s" name="input-wrapper-text-s">
</fds-input>
<fds-input input-maxwidth="m">
<label>Inputfelt med attributten maxwidth="m" (32rem)</label>
<input type="text" id="input-wrapper-text-m" name="input-wrapper-text-m">
</fds-input>
<fds-input input-maxwidth="l">
<label>Inputfelt med attributten maxwidth="l" (40rem)</label>
<input type="text" id="input-wrapper-text-l" name="input-wrapper-text-l">
</fds-input>
<fds-input input-maxwidth="xl">
<label>Inputfelt med attributten maxwidth="xl" (48rem)</label>
<input type="text" id="input-wrapper-text-xl" name="input-wrapper-text-xl">
</fds-input><fds-input input-maxwidth="xxs">
<label for="input-wrapper-text-xxs">Inputfelt med attributten maxwidth="xxs" (8rem)</label>
<input type="text" id="input-wrapper-text-xxs" name="input-wrapper-text-xxs" class="input-width-xxs">
</fds-input>
<fds-input input-maxwidth="xs">
<label for="input-wrapper-text-xs">Inputfelt med attributten maxwidth="xs" (16rem)</label>
<input type="text" id="input-wrapper-text-xs" name="input-wrapper-text-xs" class="input-width-xs">
</fds-input>
<fds-input input-maxwidth="s">
<label for="input-wrapper-text-s">Inputfelt med attributten maxwidth="s" (24rem)</label>
<input type="text" id="input-wrapper-text-s" name="input-wrapper-text-s" class="input-width-s">
</fds-input>
<fds-input input-maxwidth="m">
<label for="input-wrapper-text-m">Inputfelt med attributten maxwidth="m" (32rem)</label>
<input type="text" id="input-wrapper-text-m" name="input-wrapper-text-m" class="input-width-m">
</fds-input>
<fds-input input-maxwidth="l">
<label for="input-wrapper-text-l">Inputfelt med attributten maxwidth="l" (40rem)</label>
<input type="text" id="input-wrapper-text-l" name="input-wrapper-text-l" class="input-width-l">
</fds-input>
<fds-input input-maxwidth="xl">
<label for="input-wrapper-text-xl">Inputfelt med attributten maxwidth="xl" (48rem)</label>
<input type="text" id="input-wrapper-text-xl" name="input-wrapper-text-xl" class="input-width-xl">
</fds-input>Input bredde med tegn
<fds-input input-maxwidth="4">
<label>Inputfelt med attributten maxwidth="4" (4 tegn)</label>
<input type="text" id="input-wrapper-text-4" name="input-wrapper-text-4">
</fds-input>
<fds-input input-maxwidth="8">
<label>Inputfelt med attributten maxwidth="8" (8 tegn)</label>
<input type="text" id="input-wrapper-text-8" name="input-wrapper-text-8">
</fds-input>
<fds-input input-maxwidth="11">
<label>Inputfelt med attributten maxwidth="11" (11 tegn)</label>
<input type="text" id="input-wrapper-text-11" name="input-wrapper-text-11">
</fds-input>
<fds-input input-maxwidth="27">
<label>Inputfelt med attributten maxwidth="27" (27 tegn)</label>
<input type="text" id="input-wrapper-text-27" name="input-wrapper-text-27">
</fds-input><fds-input input-maxwidth="4">
<label for="input-wrapper-text-4">Inputfelt med attributten maxwidth="4" (4 tegn)</label>
<input type="text" id="input-wrapper-text-4" name="input-wrapper-text-4" class="input-char-4">
</fds-input>
<fds-input input-maxwidth="8">
<label for="input-wrapper-text-8">Inputfelt med attributten maxwidth="8" (8 tegn)</label>
<input type="text" id="input-wrapper-text-8" name="input-wrapper-text-8" class="input-char-8">
</fds-input>
<fds-input input-maxwidth="11">
<label for="input-wrapper-text-11">Inputfelt med attributten maxwidth="11" (11 tegn)</label>
<input type="text" id="input-wrapper-text-11" name="input-wrapper-text-11" class="input-char-11">
</fds-input>
<fds-input input-maxwidth="27">
<label for="input-wrapper-text-27">Inputfelt med attributten maxwidth="27" (27 tegn)</label>
<input type="text" id="input-wrapper-text-27" name="input-wrapper-text-27" class="input-char-27">
</fds-input>Konfiguration
Attributter
| Attribut | Beskrivelse |
|---|---|
| show-required-status | Viser om inputfeltet er obligatorisk eller frivilligt. Indsæt en tekst i attributten for at overskrive default-teksten. |
| input-prefix | Indsæt et præfix-element (tekst før inputfeltet). |
| input-suffix | Indsæt et suffiks-element (tekst efter inputfeltet). Kræver at inputfeltet ligger i en form-input-wrapper. |
| input-maxwidth | Angiver inputfeltets maksimale bredde. Den kan sættes som et tal (4, 8, 11, 27), eller som en størrelsesværdi (xxs, xs, s, m, l, xl). |
Funktioner
| Funktion | Beskrivelse |
|---|---|
| updateIdReferences() | Sikrer korrekt kobling mellem label, input og øvrige elementer. Kald ved behov. |
| setClasses() | Sætter de nødvendige klasser på inputfelt og label. Kald ved behov. |