Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Komponenter
Datofelter
Tre separate felter for dato, måned og år er den nemmeste måde for brugeren at indskrive en dato.
Sådan bruges komponenten
Anvendes til
Sætter brugeren i stand til at tilføje struktureret datoinformation.
Anvendes ikke til
Når der er specifikt udvalgte datoer at vælge imellem som fx ved bookninger og planlægning med specifikke åbne og lukkede datoer.
Vejledning
Placér felterne i den rækkefølge for datoform, der anvendes i Danmark, det vil sige dag, måned og år.
Tilføj hjælpetekst, der viser formatet af datoen man efterspørger.
Ofte kan datofelter til indtastning være nemmere at anvende - og gøre tilgængeligt - end en datovælger (date picker) funktion.
Sådan (do)
Sådan: Vis som udgangspunkt indtastningsfelter til datoer som 3 separate felter til dag, måned og år (Silver, 2018, s. 155-158). Brug de formular-elementer, der er mest effektive for brugerne. At indtaste en dato, en måned og et år i simple felter er i mange tilfælde hurtigere end at vælge datoerne via en datovælger (Babich, 2019; Enders, 2016, s. 107-109).
Ikke sådan (don't)
Ikke sådan: Brug ikke opdelte indtastningsfelter til angivelse af datoer, når der er specifikt udvalgte datoer at vælge i mellem, samt når ugedage kan have betydning for brugerens valg. Anvend her i stedet datovælger.
Fejlmeddelelse
Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.
Når der vises en fejlmeddelelse, vis da også fejlopsummering.
Se komponenten i eksempelløsninger
Trinformular til registrering: Tidligere registrering (vælg ‘Ja’)
Referencer
- Adam Silver: Form Design Patterns (2018)
- Nick Babich: Date Picker Design Best Practices (2019)
- Jessica Enders: Designing UX: Forms (2016)
- Angie Li: Date-Input Form Fields: UX Design Guidelines (2017)
- GovUKs anbefalinger til datovælgeren, samt for fejlmeddelelser til datoer
- GovUK om at spørge brugeren om datoer
- GovUK om fejlmeddelelser generelt
Installation
HTML Struktur
Kodeeksempel
<div class="form-group">
<fieldset aria-describedby="date-input-example-hint ">
<legend class="form-label">
Indsendelsesfrist
</legend>
<span class="form-hint" id="date-input-example-hint">For eksempel: 05 12 2018</span>
<div class="date-group mt-3">
<div class="form-group form-group-day">
<label class="form-label" for="date-input-example-day">Dag</label>
<input type="number" id="date-input-example-day" name="deadline-day"
class="form-input" required>
</div>
<div class="form-group form-group-month">
<label class="form-label" for="date-input-example-month">Måned</label>
<input type="number" id="date-input-example-month" name="deadline-month"
class="form-input" required>
</div>
<div class="form-group form-group-year">
<label class="form-label" for="date-input-example-year">År</label>
<input type="number" id="date-input-example-year" name="deadline-year"
class="form-input" required>
</div>
</div>
</fieldset>
</div>- Anvend ikke JavaScript til automatisk at flytte fokus fra felt til felt, da det gør det svært for tastatur-brugere at navigere i formularen.
- Datofelter-komponenten består af 3 inputfelter.
Fejlmeddelelse
Læs mere om korrekt brug af fejlmeddelelser og fejlmeddelelser’s implementering med datofelter.
Når der vises en fejlmeddelelse, vis da også en fejlopsummering.
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-date-input> med <div class="fds-date-input">. Bemærk, at man i så fald selv er ansvarlig for HTML og funktionalitet.
Eksempler
<fds-date-input>
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-fdfbbdec">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-1be579c9">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-f31c34cb">
</div>
</div>
</fieldset>
</fds-date-input><fds-date-input>
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label for="dat-day-fdfbbdec">Dag</label>
<input name="day" id="dat-day-fdfbbdec" type="number">
</div>
<div data-attribute="month">
<label for="dat-month-1be579c9">Måned</label>
<input name="month" id="dat-month-1be579c9" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-f31c34cb">År</label>
<input name="year" id="dat-year-f31c34cb" type="number">
</div>
</div>
</fieldset>
</fds-date-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-date-input>
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-450e93ab">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-bc1fc9e8">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-4783fc19">
</div>
</div>
<fds-error-message id="errore8d9ef0e">Der er sket en fejl</fds-error-message>
</fieldset>
</fds-date-input>
<fds-date-input>
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-1ab610af">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-2b9149d1">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-5572ff30">
</div>
</div>
<fds-error-message targets="day, year" id="errorcafee2aa">Fejl i indtastet dag og år</fds-error-message>
</fieldset>
</fds-date-input><fds-date-input>
<fieldset aria-describedby="errore8d9ef0e">
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label for="dat-day-450e93ab">Dag</label>
<input name="day" id="dat-day-450e93ab" type="number">
</div>
<div data-attribute="month">
<label for="dat-month-bc1fc9e8">Måned</label>
<input name="month" id="dat-month-bc1fc9e8" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-4783fc19">År</label>
<input name="year" id="dat-year-4783fc19" type="number">
</div>
</div>
<fds-error-message id="errore8d9ef0e">
<svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
<span class="visible-message">Der er sket en fejl</span>
</fds-error-message>
</fieldset>
</fds-date-input>
<fds-date-input>
<fieldset aria-describedby="errorcafee2aa">
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label for="dat-day-1ab610af">Dag</label>
<input name="day" id="dat-day-1ab610af" type="number" aria-invalid="true">
</div>
<div data-attribute="month">
<label for="dat-month-2b9149d1">Måned</label>
<input name="month" id="dat-month-2b9149d1" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-5572ff30">År</label>
<input name="year" id="dat-year-5572ff30" type="number" aria-invalid="true">
</div>
</div>
<fds-error-message targets="day, year" id="errorcafee2aa">
<svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
<span class="visible-message">Fejl i indtastet dag og år</span>
</fds-error-message>
</fieldset>
</fds-date-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-date-input>
<fieldset>
<legend>Indtast dato</legend>
<fds-help-text id="help9c6e2d9d">Dette er en hjælpetekst</fds-help-text>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-d16cdbdf">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-1bd0bdef">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-26f9a2e8">
</div>
</div>
</fieldset>
</fds-date-input><fds-date-input>
<fieldset aria-describedby="help9c6e2d9d">
<legend>Indtast dato</legend>
<fds-help-text id="help9c6e2d9d" class="help-text">Dette er en hjælpetekst</fds-help-text>
<div>
<div data-attribute="day">
<label for="dat-day-d16cdbdf">Dag</label>
<input name="day" id="dat-day-d16cdbdf" type="number">
</div>
<div data-attribute="month">
<label for="dat-month-1bd0bdef">Måned</label>
<input name="month" id="dat-month-1bd0bdef" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-26f9a2e8">År</label>
<input name="year" id="dat-year-26f9a2e8" type="number">
</div>
</div>
</fieldset>
</fds-date-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-date-input input-required show-required-status>
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-1751c6c4">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-a76c9d44">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-400a32d5">
</div>
</div>
</fieldset>
</fds-date-input>
<fds-date-input show-required-status>
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-7bfcd04c">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-1035758b">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-d522cdfd">
</div>
</div>
</fieldset>
</fds-date-input>
<fds-date-input input-required show-required-status="required">
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-97d3901c">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-d9ae2be8">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-1368cd98">
</div>
</div>
</fieldset>
</fds-date-input>
<fds-date-input show-required-status="optional">
<fieldset>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-3a92750e">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-dca46fa3">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-54516da7">
</div>
</div>
</fieldset>
</fds-date-input><fds-date-input input-required="" show-required-status="">
<fieldset>
<legend>Indtast dato<span class="weight-normal"> (frivilligt)</span>
</legend>
<div>
<div data-attribute="day">
<label for="dat-day-1751c6c4">Dag</label>
<input name="day" id="dat-day-1751c6c4" type="number" required="">
</div>
<div data-attribute="month">
<label for="dat-month-a76c9d44">Måned</label>
<input name="month" id="dat-month-a76c9d44" type="number" required="">
</div>
<div data-attribute="year">
<label for="dat-year-400a32d5">År</label>
<input name="year" id="dat-year-400a32d5" type="number" required="">
</div>
</div>
</fieldset>
</fds-date-input>
<fds-date-input show-required-status="">
<fieldset>
<legend>Indtast dato<span class="weight-normal"> (frivilligt)</span>
</legend>
<div>
<div data-attribute="day">
<label for="dat-day-7bfcd04c">Dag</label>
<input name="day" id="dat-day-7bfcd04c" type="number">
</div>
<div data-attribute="month">
<label for="dat-month-1035758b">Måned</label>
<input name="month" id="dat-month-1035758b" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-d522cdfd">År</label>
<input name="year" id="dat-year-d522cdfd" type="number">
</div>
</div>
</fieldset>
</fds-date-input>
<fds-date-input input-required="" show-required-status="required">
<fieldset>
<legend>Indtast dato<span class="weight-normal"> (required)</span>
</legend>
<div>
<div data-attribute="day">
<label for="dat-day-97d3901c">Dag</label>
<input name="day" id="dat-day-97d3901c" type="number" required="">
</div>
<div data-attribute="month">
<label for="dat-month-d9ae2be8">Måned</label>
<input name="month" id="dat-month-d9ae2be8" type="number" required="">
</div>
<div data-attribute="year">
<label for="dat-year-1368cd98">År</label>
<input name="year" id="dat-year-1368cd98" type="number" required="">
</div>
</div>
</fieldset>
</fds-date-input>
<fds-date-input show-required-status="optional">
<fieldset>
<legend>Indtast dato<span class="weight-normal"> (optional)</span>
</legend>
<div>
<div data-attribute="day">
<label for="dat-day-3a92750e">Dag</label>
<input name="day" id="dat-day-3a92750e" type="number">
</div>
<div data-attribute="month">
<label for="dat-month-dca46fa3">Måned</label>
<input name="month" id="dat-month-dca46fa3" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-54516da7">År</label>
<input name="year" id="dat-year-54516da7" type="number">
</div>
</div>
</fieldset>
</fds-date-input>Deaktiveret
<fds-date-input>
<fieldset disabled>
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label>Dag</label>
<input name="day" id="dat-day-4782dcc3">
</div>
<div data-attribute="month">
<label>Måned</label>
<input name="month" id="dat-month-6ddc63c0">
</div>
<div data-attribute="year">
<label>År</label>
<input name="year" id="dat-year-b579da81">
</div>
</div>
</fieldset>
</fds-date-input><fds-date-input>
<fieldset disabled="">
<legend>Indtast dato</legend>
<div>
<div data-attribute="day">
<label for="dat-day-4782dcc3">Dag</label>
<input name="day" id="dat-day-4782dcc3" type="number">
</div>
<div data-attribute="month">
<label for="dat-month-6ddc63c0">Måned</label>
<input name="month" id="dat-month-6ddc63c0" type="number">
</div>
<div data-attribute="year">
<label for="dat-year-b579da81">År</label>
<input name="year" id="dat-year-b579da81" type="number">
</div>
</div>
</fieldset>
</fds-date-input>Konfiguration
Attributter
| Attribut | Beskrivelse |
|---|---|
| input-readonly | Sætter readonly på datofelterne. Sæt til en anden værdi end false. |
| input-required | Sætter alle datofelter til ‘påkrævet’. |
| show-required-status | Viser om datofelterne er obligatoriske eller frivillige. Indsæt en tekst i attributten for at overskrive default-teksten. |
| legend | Generér og indsæt legend i fieldset. Bør ikke anvendes, hvis HTML’en på forhånd er genereret. |