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>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
Bruk required for å vise et stjernesymbol på slutten av ledeteksten som markerer at feltet er påkrevd.
Bruk i tillegg requiredLabel for å vise en forklarende tekst sammen med stjernen (for eksempel 'obligatorisk'). Dette gir brukerne en bedre forståelse av at feltet er påkrevd, siden ikke alle brukere forstår eller oppfatter stjernesymbolet alene.
<nve-input label="Saksbehandlers navn" required requiredLabel="Obligatorisk"> </nve-input>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>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>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-spor
Bruk start-sporet for å legge til et ikon.
<nve-input label="Saksbehandlers navn">
<nve-icon slot="start" 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"></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>External validation
Bruker du eksternal validering system, kan du fortsatt sette feil status på input ved bruk av errorMessage.
<form>
<nve-input label="Beskriv saken" 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).
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").
Hendelser
| Navn | Arvet fra | Beskrivelse |
|---|---|---|
| change | - når verdien i input endres og elementet mister fokus | |
| select | - når brukeren markerer tekst i input |
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 | ||
| 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 | ||
| 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 |
| 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 |