Text input

Release dato: 14.08.2023

Sist oppdatert: 07.07.2025

Et text input (tekstfelt, inputfelt) lar brukeren skrive fritekst, oftest i skjemaer, men også i andre deler av en tjeneste. Bruk tekstfelt til korte verdier som får plass på én linje, for eksempel navn, e-post, telefonnummer, fødselsnummer eller beløp.

Målet er at brukeren raskt forstår hva som skal fylles inn, og får tydelig tilbakemelding hvis noe er feil.

Live demo

Relaterte komponenter

Varianter

Text input brukes vanligvis sammen med input wrapper. Under dokumentasjonen til denne finner du mer om hvordan du skriver gode labels og hjelpetekster, og om funksjonene i input wrapper.

Type	Beskrivelse
Standard	Label, placeholder og tekstfelt
Med hjelpetekst	Kort hjelpetekst under label
Med ekspanderende hjelpetekst	Hjelpetekst bak “Les mer”-knapp
Valgfritt-tag/obligatorisk tag	Viser enten “Valgfritt” eller “Må fylles ut” ved siden av label

Text input brukes vanligvis sammen med input wrapper, under dokumentasjonen til denne finner du mer om hvordan du skriver gode labels og hjelpetekster, og om funksjonene i input wrapper.

States

Text input har seks ulike states som gir brukeren visuell tilbakemelding i ulike situasjoner:

State	Beskrivelse
Default	Feltet vises i normal tilstand, klar til bruk
Hover	Når brukeren beveger musepekeren over feltet
Focus	Når brukeren har markert feltet og er klar til å skrive
Active	Når brukeren skriver i feltet
Error	Når feltet har en feil, og en forklarende feilmelding vises
Disabled	Når feltet ikke er tilgjengelig for interaksjon

Retningslinjer for bruk

Bruk text input når

brukeren skal skrive kort fritekst på én linje, som navn, e-post, telefonnummer eller beløp
verdien er unik og ikke kan velges fra en liste

Unngå text input når

brukeren skal velge mellom forhåndsdefinerte alternativer (bruk heller select, radio button eller checkbox)
innholdet er lengre fritekst, som avsnitt eller flere setninger (bruk heller textarea)

Labels/etikett

En label skal være kort og presis, helst mellom ett og tre ord. Unngå kolon på slutten og bruk verken kun store eller små bokstaver.

Gjør slik

Unngå

Plassholder

Plassholder skal aldri være eneste instruksjon. Den forsvinner når brukeren gjør et valg, og er ikke alltid tilgjengelig for skjermlesere. Bruk heller label og/eller hjelpetekst for å gi nødvendig veiledning.

Gjør slik

Unngå

Bredde

Bredden på feltet bør passe til innholdet du forventer at brukeren fyller inn. Et telefonnummerfelt bør for eksempel ikke være bredere enn antallet tegn som skal skrives inn. Ulik bredde på feltene gjør det lettere å navigere i skjemaer med mange felt.

Text input er egnet til korte tekster og svar. Textarea er egnet til mer utfyllende og lengre svar.

Gjør slik

Unngå

Valgfritt eller påkrevd

Velg én metode for å markere felter: enten viser du «Valgfritt» på de åpne feltene, eller «Må fylles ut» på de obligatoriske. Bland aldri begge i samme løsning.

Prefiks og suffiks

Bruk prefiks når faste tegn skal vises foran verdien, for eksempel landskode på telefonnummer. Bruk suffiks når du skal vise en enhet, et ikon eller tilby en handling som å tømme feltet eller vise/skjule passord.

Hjelpetekst og feilmeldinger

Hjelpetekst skal alltid bidra til å avklare, ikke gjenta. Den skal forklare hvordan brukeren skal fylle ut feltet, for eksempel hvilket format som gjelder, eller hvor de finner informasjonen.

Feilmeldinger skal være konkrete og hjelpe brukeren videre. De bør forklare hva som er galt, og så langt som mulig foreslå hvordan det kan rettes opp.

Les mer om innhold i skjemaelementer i input wrapper-dokumentasjonen og om god praksis for skjemaer.

Responsivitet

Text input tilpasser seg tilgjengelig plass og bryter linjer ved behov.

Test at:

hjelpetekst og feilmeldinger holder seg nær feltet
prefiks/suffiks ikke skyver ut viktig innhold
klikkbare ikoner er store nok på mobil

Universell utforming

Synlig eller skjult label

Alle felt skal ha en label. Den kan være synlig, eller skjult med pkt-sr-only når den ikke skal vises visuelt. Labelen må være koblet til feltet i koden, slik at skjermlesere leser opp riktig informasjon.

Hjelpetekst og feilmelding

Hjelpetekst og feilmeldinger skal knyttes til feltet med aria-describedby. På den måten får skjermlesere lest opp riktig kontekst. Feilmeldinger må være tekst, plassert rett under feltet, og forklare både hva som er galt og hvordan det kan rettes. Ikke vis feilmeldinger før brukeren faktisk har forsøkt å fylle ut feltet.

Riktig type og autofyll

Bruk riktige type-verdier for å gi bedre tilgjengelighet og riktig tastatur på mobil, for eksempel email, tel eller password. Angi autocomplete der det er nyttig, som name eller one-time-code.

Klikkbare prefiks og suffiks

Ikoner eller tekst som fungerer som handlinger (for eksempel “vis/skjul passord”) må kunne fokuseres med tastatur og ha en tydelig beskrivelse for skjermlesere.

Unngå plassholder som instruksjon

Plassholdertekst forsvinner når brukeren skriver, og er ofte utilgjengelig for skjermlesere. Viktig veiledning må derfor alltid ligge i label eller hjelpetekst.

Inndata

For å sikre en god brukeropplevelse er det viktig å bruke en kombinasjon av riktig input-type og autocomplete-attributter. Les mer om autocomplete på MDN Webdocs.

Tillat variasjoner i hvordan data skrives inn, så lenge informasjonen er forståelig. For eksempel bør telefonnumre kunne inneholde mellomrom, personnumre punktum, og e-postadresser aksepteres selv om de har et mellomrom til slutt
Velg inputtyper som samsvarer med informasjonen du ber om, for eksempel tel, search eller email. Dette gir mobilbrukere et tilpasset tastatur, men vær oppmerksom på at enkelte inputtyper kan aktivere klientsidevalidering
autocomplete brukes i felter som mottar personlig informasjon. Hvis feltet skal be om personopplysninger om en annen person enn brukeren, må du sette autocomplete="off"
Pass på at brukerne ser inndata som formateres automatisk, men uten at det forstyrrer dem mens de fyller ut.

Mer om universell utforming av text input:

Anatomi

Element	Beskrivelse
Label (etikett)	Kort og tydelig ledetekst som beskriver hva brukeren skal skrive
Valgfritt-/obligatorisk	Merker feltet som valgfritt eller obligatorisk
Hjelpetekst	Kort forklaring under label som hjelper brukeren å forstå hvordan de skal fylle ut feltet
Ekspanderende hjelpetekst	“Les mer”-knapp som viser mer utfyllende informasjon når brukeren trenger ekstra forklaring
Inputfelt	Selve inputfeltet der brukeren skriver inn
Plassholdertekst	Midlertidig tekst i feltet som indikerer at brukeren må gjøre et valg, skal ikke erstatte label

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:

await window.customElements.whenDefined("pkt-textinput");

Props og tokens

Prop	Type	Beskrivelse
`label`	`string`	Tekst som vises over feltet
`name`	`string`	Navn som sendes brukes i skjema ved innsending
`placeholder`	`string`	Spesifiserer en kort hint som beskriver forventet verdi av feltet.
`helptext`	`string`	Hjelpetekst som vises over feltet
`helptextDropdown`	`string`	Hjelpetekst som vises i en lukket boks man kan åpne
`helptextDropdownButton`	`string`	Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst
`size`	`number`	Spesifiserer bredde på feltet i antall tegn.
`type`	`color` `date` `datetime-local` `email` `file` `month` `number` `password` `search` `tel` `text` `time` `url` `week`	Spesifiserer typen av feltet. Standard er 'text'.
`omitSearchIcon`	`boolean`	Indikerer om søkeikonet skal utelates.
`value`	`string`	Spesifiserer den nåværende verdien av feltet.
`autocomplete`	`string`	Spesifiserer hvordan type `autocomplete` feltet har. Standard er 'off'.
`suffix`	`string`	Spesifiserer et suffiks som vises etter feltet.
`prefix`	`string`	Spesifiserer et prefiks som vises før feltet.
`iconNameRight`	`icon`	Spesifiserer navnet på ikonet som vises til høyre for feltet.
`ariaLabelledby`	`string`	Spesifiserer ID-en til elementet som beskriver feltet.
`required`	`boolean`	Er feltet påkrevd?
`requiredTag`	`boolean`	Indikerer om feltet er påkrevd.
`requiredText`	`string`	Tekst som vises i påkrevd-merkingen
`optionalTag`	`boolean`	Indikerer om feltet er valgfritt.
`optionalText`	`string`	Tekst som vises i valgfritt-merkingen
`tagText`	`string`	Tekst som vises i en tag ved siden av label
`hasError`	`boolean`	Indikerer om feltet har en feil.
`errorMessage`	`string`	Tekst som vises under datovelgeren ved feiltilstand
`disabled`	`boolean`	Indikerer om feltet er deaktivert.
`inline`	`boolean`	Indikerer om feltet skal vises inline.
`fullwidth`	`boolean`	Indikerer om feltet skal ta opp full bredde.
`useWrapper`	`boolean`	Indikerer at feltet skal ha synlig label og hjelpetekst
`id`	`string`	Spesifiserer den unike identifikatoren for feltet.
`counter`	`boolean`	Indikerer om en teller skal vises.
`counterMaxLength`	`number`	Spesifiserer maksimal lengde for telleren.

Event	Beskrivelse
`change`	Returnerer verdi som streng
`toggleHelpText`	Returnerer `event.detail { isOpen: true }` eller `event.detail { isOpen: false }` når hjelpeteksten åpnes eller lukkes

Farger

Element	CSS variabel
Border
Text