nve-input
Arvet fra LitElement
Feil / oppgaver / PR
Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-input.
<nve-input label="Saksbehandlers navn"></nve-input>nve-input bygger på et native <input>-element og støtter derfor de fleste vanlige input-attributter:
- autocapitalize
- autocomplete
- autocorrect
- autofocus – husk at kun ett element kan autofokuseres per dokument.
- inputmode
- maxLength – brukes til å begrense antall tegn brukeren kan skrive. Fungerer kun for typene text, search, url, tel, email og password.
- max – brukes for å sette øvre grenseverdi. Fungerer kun for typene date, month, week, time, datetime-local, number og range.
- min – brukes for å sette nedre grenseverdi. Fungerer kun for typene date, month, week, time, datetime-local, number og range.
- placeholder
- readonly
- required – brukes blant annet for å annonsere obligatorisk tekstfelt for skjermleser.
- spellcheck
- step – fungerer kun for typene date, month, week, time, datetime-local, number og range.
- type – støttede typer: date, datetime-local, email, number, password, search, tel, text, time, week, month og url. Ikke støttet: button, checkbox, color, file, hidden, image, radio, range, reset og submit.
- value
Noen viktige hendelser fra det interne <input>-elementet er at det ikke automatisk går i gjennom komponentens Shadow DOM. Derfor videresender komponenten disse hendelsene programmatisk, slik at de kan fanges utenfor komponenten.
- change – når verdien endres og feltet mister fokus
- select – når brukeren markerer tekst
selectionchange støttes ikke foreløpig siden den ikke er fullstøttet i mange nettlesere.
Noen native attributter er bevisst ikke støttet:
- dirname, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, pattern, minlength og multiple – komponenten er ikke laget for native form submission og innebygd constraint validation.
- popovertarget og popovertargetaction – fordi type button ikke støttes.
- accept og capture – fordi type file ikke støttes.
- alpha og colorspace – fordi type color ikke støttes.
- alt, src, width og height – fordi type image ikke støttes.
- checked – fordi type checkbox ikke støttes.
- size – størrelsen styres av komponentens egne størrelsesvalg.
- list – ikke støttet.
Retningslinjer
- Gi alltid feltet en tydelig label. Ikke stol på placeholder alene.
- Bruk disabled med omhu. Deaktivert tekstfelt kan ikke fokuseres og kan derfor være vanskeligere å oppdage med tastatur/skjermleser. Hvis innholdet skal kunne leses, vurder readonly i stedet.
- Hvis du bruker maxlength, min eller max informer gjerne brukeren om grensen (for eksempel i hint) slik at det ikke oppleves som “feltet slutter å virke”.
Eksempler
Ledetekst
Bruk label for å vise en tydelig ledetekst for feltet. Attributtet er påkrevd – hvert skjemafelt skal ha en ledetekst som skjermlesere kan bruke for å forstå hva feltet gjelder.
<nve-input label="Saksbehandlers navn"> </nve-input>Skjult ledetekst
Vi anbefaler å alltid vise ledeteksten. Hvis den i enkelte tilfeller må skjules av hensyn til utformingen, kan du bruke CSS til å skjule den visuelt. Ledeteksten er fortsatt tilgjengelig i DOM-en og kan leses av skjermlesere.
Bruk ::part(label) for å skjule ledeteksten.
Det kan også være nødvendig å sette margin-top: 0 på ::part(input) for å fjerne avstanden over feltet.
<nve-input class="hideLabel" label="Saksbehandlers navn"> </nve-input>
<style>
.hideLabel::part(label) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.hideLabel::part(input) {
margin-top: 0;
}
</style>Toggletip
Bruk sporet label-toggletip for å vise en toggletip ved siden av ledeteksten. Sporet er beregnet for en nve-toggletip-komponent.
Husk å legge til aria-label på nve-toggletip.
<nve-input label="Beskriv saken">
<nve-toggletip slot="label-toggletip" aria-label="Les mer om saken">
<span>Ekstra info her.</span>
</nve-toggletip>
</nve-input>Påkrevd og Valgfritt
Det er ikke nødvendig å merke feltene som obligatoriske dersom flertallet av feltene er påkrevd. Brukeren må imidlertid informeres om dette før vedkommende begynner å fylle ut skjemaet. Dersom enkelte felt er valgfrie, skal disse merkes tydelig som valgfrie. Tilsvarende gjelder dersom flertallet av feltene er valgfrie – da skal de obligatoriske feltene merkes særskilt.
Bruk required for å sette feltet til obligatorisk, og bruk hideRequiredTag for å skjule merket «Må fylles ut» uten å endre at feltet er obligatorisk.
Bruk optional for å vise merket «Valgfritt».
<nve-input label="Saksbehandlers navn" required></nve-input>
<nve-input label="E-postadresse" optional></nve-input>Ved annet språk, kan attributtene requiredLabel og optionalLabel tas i bruk. De erstatter teksten i henholdsvis required-merket og optional-merket, uten å legge til et nytt merke. Brukes sammen med required og optional attributtene. Standardtekstene er «Må fylles ut» og «Valgfritt» og skal ikke endres etter retningslinjene.
Hjelpetekst
Bruk helpText for å vise en tekst som nærmere bestemmer hva som skal fylles inn i tekstfeltet, og brukes som et tillegg til ledeteksten for tekstfeltet. Hjelpeteksten vises over tekstfeltet.
<nve-input label="Saksbehandlers navn" helpText="En tekst som presiserer hva som skal fylles inn"> </nve-input>Hvis hjelpeteksten skal inneholde mer enn vanlig tekst, for eksempel en lenke, kan du bruke helpText-sporet.
Du kan ikke bruke helpText-attributtet og helpText-sporet samtidig. Hvis begge er angitt, prioriteres attributtet.
Se tilgjengelighet for informasjon om hvordan hjelpeteksten med en lenke bør struktureres.
<nve-input label="Saksbehandlers navn">
<p slot="helpText">Se <a href="#">hva saksbehandler er</a> på nve.no</p>
</nve-input>Hint
Bruk hint for å vise en kortfattet tekst, som kan brukes for å gi eksempler på inndata. Hintet legges under tekstfeltet.
<nve-input label="Saksbehandlers navn" hint="Du må jo kjenne hen..."> </nve-input>Hvis hintteksten skal inneholde mer enn vanlig tekst, for eksempel en lenke, kan du bruke hintText-sporet.
Du kan ikke bruke hint-attributtet og hintText-sporet samtidig. Hvis begge er angitt, prioriteres attributtet.
Se tilgjengelighet for informasjon om hvordan hint med en lenke bør struktureres.
<nve-input label="Saksbehandlers navn">
<p slot="hintText">Se <a href="#">hva saksbehandler er</a> på nve.no</p>
</nve-input>Deaktivert
Et deaktivert tekstfelt (disabled) kan ikke få fokus og blir derfor ofte ikke oppdaget av brukere som navigerer med tastatur eller skjermleser. Bruk disabled med omhu, og vurder å gi en tydelig forklaring i tekst på hvorfor feltet er deaktivert.
Bruk attributtet disabled for å hindre at brukeren kan endre innholdet.
<nve-input label="Saksbehandlers navn" disabled> </nve-input>Skrivebeskyttet
Bruk readonly for å hindre at innholdet kan endres.
<nve-input label="Saksbehandlers navn" readonly value="Dette får du ikke endret"></nve-input>Input-type
Bruk type og velg en av de støttede typene:
- date
- datetime-local
- number
- password
- search
- tel
- text
- time
- week
- month
- url
- text (standard)
<nve-input label="Saksbehandlingsdato" type="week"></nve-input>
<nve-input label="Antall saker" type="number"></nve-input>Størrelse
Bruk size for å endre størrelsen på combobox‑feltet. Verdien kan være:
- large
- medium (standard)
- small
<nve-input label="Saksbehandlers navn (small)" size="small"></nve-input>
<nve-input label="Saksbehandlers navn (medium)"></nve-input>
<nve-input label="Saksbehandlers navn (large)" size="large"></nve-input>Mørk bakgrunn
Bruk filled for mørk bakgrunnsfarge
<nve-input label="Saksbehandlers navn" filled> </nve-input>Sletteknapp
Bruk clearable for å vise en knapp som fjerner verdien (vises etter at man har skrevet minst én bokstav). Et klikk på slettknappen sender også en change-hendelse.
Fjern‑knappen er ikke fokuserbar med tastatur. Dette er et bevisst valg: det er ikke forventet at fjern‑knappen skal ha eget tastaturfokus.
<nve-input label="Saksbehandlers navn" value="Raymond Nordman" clearable></nve-input>Vis/skjul passord
Når type='password' brukes, kan du klikke på øye-ikonet for å vise eller skjule teksten i feltet.
<nve-input label="Saksbehandlers hemmelig navn" type="password"></nve-input>Forhåndsutfylt verdi
Bruk value for å vise forhåndsutfylt verdi.
<nve-input label="Saksbehandlers navn" value="Raymond Nordman"></nve-input>Start og end-spor
Bruk start-sporet for å plassere innhold, for eksempel et ikon, før inputfeltet. end-sporet brukes til å plassere innhold etter inputfeltet.
Innhold i disse sporene skal som hovedregel ikke formidle informasjon som kun er tilgjengelig visuelt. Dersom innholdet inneholder viktig informasjon som brukeren trenger for å forstå eller fylle ut feltet, må den samme informasjonen også gjøres tilgjengelig for skjermleserbrukere, for eksempel gjennom hjelpetekst eller hinttekst.
<nve-input label="Saksbehandlers navn">
<nve-icon slot="start" name="cases"></nve-icon>
</nve-input>
<nve-input label="Saksbehandlers navn">
<nve-icon slot="end" name="cases"></nve-icon>
</nve-input>Validering
For mer informasjon om hvordan nve-input og andre skjemakomponenter valideres, se siden om validering.
Intern validering
Intern validering gjør det mulig å validere verdien i nve-input ved hjelp av valideringsregler.
Valideringsreglene kjøres når du kaller validateForm() i skjemaets submit-handler.
Du kan importere metoden slik:
import { validateForm } from 'nve-designsystem/validation/validateForm.js';<form id="test-form">
<nve-input id="name-input" label="Saksbehandlers navn" required></nve-input>
<nve-input id="saksnummer" label="Saksnummer"></nve-input>
<nve-button type="submit">Send inn</nve-button>
</form>
<script type="module">
const form = document.querySelector('#test-form');
const nameInput = document.querySelector('#name-input');
const saksNummerInput = document.querySelector('#saksnummer');
nameInput.validationRules = [
() => !!saksNummerInput.value || 'Saksnummer er påkrevd',
(value) => rules.required(value) || 'Feltet er påkrevd',
(value) => value.length >= 3 || 'Minimum 3 bokstaver',
(value) => value.length <= 20 || 'Maksimum 20 bokstaver',
(value) => value.startsWith('s') || 'Må starte med s',
];
form?.addEventListener('submit', (event) => {
event.preventDefault();
validateForm(event);
});
</script>Ekstern validation
Bruker du eksternal validering system, kan du fortsatt sette feil status på input ved bruk av errorMessage.
<form>
<nve-input label="Beskriv saken" required errorMessage="Feltet er påkrevd"></nve-input>
</form>Du kan fjerne feil status ved å sette errorMessage tilbake til en tom string.
<form>
<nve-input label="Beskriv saken" errorMessage=""></nve-input>
</form>Tilgjengelighet
nve-input er bygget på et native <input> og bruker en tilknyttet ledetekst. Når feltet får fokus vil skjermlesere lese opp ledeteksten, slik at brukeren forstår hva som skal fylles inn.
I tillegg brukes aria-describedby for å knytte supplerende tekst til feltet. Når helpText, hint eller errorMessage er satt vil skjermlesere normalt lese dem opp i forbindelse med fokus på feltet (ved bruk av aria-describedby).
Hvis hjelpeteksten eller hintet inneholder en lenke, bør lenketeksten beskrive hva brukeren finner når lenken åpnes. Unngå generelle tekster som "Les mer". Skriv for eksempel "Les om hvilke opplysninger du trenger for å fylle ut saksnummeret". Da gir lenken mening også når den leses opp sammen med feltets ledetekst, eller navigeres til separat med skjermleser.
Ikoner som vises når disabled eller readonly attributene brukes er dekorative og ikke ment som eneste informasjonsbærer. Skjermlesere informerer brukere når tekstfeltet er skrivebeskyttet, men ikke når det er deaktivert.
Valg av riktig type har betydning selv uten validering: skjermlesere annonserer felttypen til brukeren, og mobilenheter tilpasser tastaturet tilsvarende (eksempelvis viser tallastatur for type="number" og e-posttastatur for type="email").
Spor
| Navn | Beskrivelse |
|---|---|
| helpText | - viser hjelpetekst over inputfeltet |
| hintText | - viser hint-tekst under inputfeltet |
Hendelser
| Navn | Arvet fra | Beskrivelse |
|---|---|---|
| change | - når verdien i input endres og elementet mister fokus | |
| select | - når brukeren markerer tekst i input | |
| nve-clear | - når verdien i inputfeltet fjernes |
Egenskaper
| Navn | Type | Arvet fra | Beskrivelse | Reflected |
|---|---|---|---|---|
| testId | string | undefined = undefined | |||
| autocomplete | string | Om autocomplete skal være aktivert | ||
| disabled | = false | Om inputfeltet skal være deaktivert | ||
| inputmode | 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | Inputmodus for feltet | ||
| maxLength | number | Maksimalt antall tegn som kan skrives inn | ||
| max | string | Maksimal verdi | ||
| min | string | Minimal verdi | ||
| placeholder | string | Placeholder-tekst som vises når feltet er tomt | ||
| readonly | = false | Om inputfeltet skal være skrivebeskyttet | ||
| required | = false | Om inputfeltet er obligatorisk | ||
| optional | = false | Om inputfeltet er valgfritt | ||
| step | number | Stegverdi for inputfeltet | ||
| type | | 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'week' | 'month' | 'url' = 'text' | Inputtype for feltet | ||
| value | string = '' | Verdien i inputfeltet | ||
| errorMessage | = '' | Custom input attributer | ||
| filled | boolean = false | Om inputfeltet skal ha en mørk bakgrunn | ||
| helpText | string | Hjelpetekst som vises over feltet | ||
| hint | string | Hint-tekst som vises under feltet | ||
| label | string = '' | Ledetekst | ||
| requiredLabel | string = '' | Tekst som vises for å markere at et felt er obligatorisk | ||
| optionalLabel | string = '' | |||
| hideRequiredTag | = false | |||
| size | 'small' | 'medium' | 'large' = 'medium' | Størrelse på inputfeltet | ||
| tooltip | string = '' | Tooltip-tekst for label | ||
| clearable | = false | Om inputfeltet skal ha en knapp for å tømme verdien. Vises kun for tekst type. | ||
| validationRules | Array<ValidationRule> = [] |
Metoder
| Navn | Parametre | Returtype | Arvet fra | Beskrivelse |
|---|---|---|---|---|
| focus | options: FocusOptions | Fokuserer inputfeltet | ||
| select | Velger tekst i input-feltet | |||
| setSelectionRange | selectionStart: number selectionEnd: number selectionDirection: 'forward' | 'backward' | 'none' | Setter utvalg i input-feltet | ||
| setRangeText | replacement: string start: number end: number selectMode: 'select' | 'start' | 'end' | 'preserve' | Erstatter tekst i input-feltet | ||
| stepUp | Øker verdien i et numerisk inputfelt med verdien fra step-attributtet. | |||
| stepDown | Senker verdien i et numerisk inputfelt med verdien fra step-attributtet. | |||
| validate |
Deler
| Navn | Beskrivelse |
|---|---|
| field | - wrapper rundt hele input-komponenten |
| label | - ledetekst for inputfeltet |
| help-text | - hjelpetekst som vises over input |
| input | - wrapper rundt input-elementet og eventuelle ikoner |
| input__control | - selve input-elementet |
| hint-text | - hint-tekst som vises under input, eller feilmelding hvis det er en valideringsfeil |
| error-text | - feilmelding som vises under input, hvis det er en valideringsfeil |
| status-icon | - ikon som viser status for inputfeltet |
| clear-button | - knapp for å tømme verdien i inputfeltet |
| show-password-button | - knapp for å vise/ skjule passord i password-type input |