Målet: én komponent for hvert skjemaelement
Denne siden viser hvert eneste native HTML-skjemaelement/-type (og noen få vanlige,
domenespesifikke behov som ikke har en native ekvivalent, som pengebeløp og stedsøk) og nøyaktig hvordan
det er dekket i designsystemet - enten av en egen <lm-*-field>-komponent, eller som en
bevisst native-first-tilnærming der et rått HTML-element/-attributt allerede løser behovet helt uten
wrapper.
15 behov er dekket av en egen skjemafelt-komponent, og 2 er bevisst dekket av native HTML alene - 17 rader totalt, ingen kjente hull.
Alle skjemaelementer
| Native HTML-element/-type eller behov | Dekning i designsystemet |
|---|---|
<input type="text">/"email"/"url"/"tel"/"password"/"search" | <lm-text-field> - én komponent for alle disse via type-attributtet. |
<input type="number"> | <lm-number-field> - med en valgfri visuell enhets-suffiks («kr», «%», «stk»). |
<textarea> | <lm-textarea-field> - med innebygd tegnteller når maxlength er satt. |
<select>/<option>/<optgroup> | <lm-select-field> - valgene settes som en one-liner JSON-array (statisk) eller en JS-options-property (dynamisk). |
<input type="date">/"datetime-local"/"time"/"month"/"week" | <lm-date-field> - én komponent for alle disse via type-attributtet. |
<input type="checkbox"> (enkeltstående) | <lm-checkbox-field> - for valg som først trer i kraft ved innsending av et skjema. |
<input type="checkbox" switch> | <lm-switch-field> - for umiddelbare av/på-innstillinger utenfor et innsendingsskjema. |
<input type="radio"> i <fieldset> | <lm-radio-group-field> - genererer hele gruppen fra en options-liste. |
<input type="file"> | <lm-file-field> - native dra-og-slipp (ingen egen JS-håndtering), med accept/multiple og synlig filliste. |
<input type="color"> | <lm-color-field>. |
<input type="range"> (ett håndtak) | <lm-range-field> - med en live verditekst ved siden av etiketten. |
| To eller flere håndtak i én glidebryter | <lm-range-slider> - dekker APG Slider (multithumb), ingen native ekvivalent finnes. |
| Pengebeløp (ikke et eget native input-type) | <lm-currency-field> - live valutaformatert visning bygget på formatCurrency. |
| Søk-med-forslag / autocomplete mot en datakilde (inkl. stedsøk med kartforhåndsvisning) | Native-first: et <input list="..."> koblet til en <datalist>, populert dynamisk - se kobleDatalistSok() for debounce, rasevern og oppslag av det fulle valgte objektet (f.eks. med lat/lng for en kartforhåndsvisning). |
Frittstående enkelt-/flervalgsliste (uten en <select>) | <lm-listbox> - dekker APG Listbox for tilfeller der alle valgene skal være synlige samtidig i en rullbar liste. |
| Flertrinnsskjema/veiviser | <lm-multistep-form> - steg-for-steg-navigasjon rundt et vanlig <form>. |
| Skjemavalidering (påkrevd, min/maks, mønster) | Native-first: alle lm-*-field-komponentene videresender required/pattern/min/max/minlength/maxlength til sitt interne felt og henter valideringsmeldingen derfra via ElementInternals - ingen egen valideringslogikk noe sted. |
Felles mønster for alle lm-*-field-komponentene
- Alle er form-associated custom elements (
ElementInternals) og deltar i vanligFormData/<form>-innsending under sittname-attributt, helt som et native felt. - Alle har samme etikett-/hjelpetekst-/feilmeldingsoppsett:
label-attributtet gir den synlige etiketten,helpen hjelpetekst under feltet, og valideringsmeldingen fra det interne native feltet vises automatisk som enrole="alert"-tekst først etter at brukeren har samhandlet med feltet eller forsøkt å sende inn skjemaet. - Alle bygger på et ekte, internt native element (
<input>,<select>,<textarea>eller<fieldset>med<input type="radio">) - ingen egendefinert tastatur-/skjermleser-håndtering der native HTML allerede løser det. - Alle deler samme krom-stilark
(
designsystem/komponenter/skjema/skjema-felt-delt.css) og valideringshjelper (skjema-felt-delt.js) - ingen duplisert CSS/JS på tvers av feltene.
Se selve komponentsidene i tabellen over for attributter, egenskaper og brukseksempler for hvert felt.