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.

Har du noen innspill til komponenten?Gi oss beskjed!

Relaterte komponenter

Checkbox

Når brukeren kan velge flere alternativer

Radio button

Når brukeren skal velge ett av få alternativer

Combobox

Når brukeren skal skrive for å søke etter alternativer

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

Størrelser

Text input kan brukes i tre ulike størrelser:

Størrelser	Bruk
Medium (default)	Standard, og skal brukes som hovedregel
Small	For trange flater, som tabeller og kompakte skjema
XSmall	For ekstra trange flater, som kompakte tabeller og informasjonstette fagsystemer

Eksempel på text input i forskjellige størrelser

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:

Ledetekster og instruksjoner (UUtilsynet)

Beskriver hvordan du gjør text input tilgjengelige

Placeholders in Form Fields Are Harmful (NNg)

Forklarer hvorfor bruk av kun placeholder tekst bør unngås

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?

import @oslokommune/punkt-elements/dist/pkt-textinput.js;

import { PktTextinput } from '@oslokommune/punkt-react';

<script src="https://punkt-cdn.oslo.kommune.no/19/elements/pkt-textinput.js" type="module"></script>

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");

Egenskaper

Props

Prop:: label?
Type:: string
Beskrivelse:: Tekst som vises over feltet
Prop:: name
Type:: string
Beskrivelse:: Navn som brukes i skjema ved innsending
Prop:: form?
Type:: string
Beskrivelse:: ID-en til skjemaet feltet hører til, når feltet ligger utenfor skjemaet
Prop:: placeholder?
Type:: string
Beskrivelse:: Spesifiserer en kort hint som beskriver forventet verdi av feltet.
Prop:: helptext?
Type:: string
Beskrivelse:: Hjelpetekst som vises over feltet
Prop:: helptextDropdown?
Type:: string
Beskrivelse:: Hjelpetekst som vises i en lukket boks man kan åpne
Prop:: helptextDropdownButton?
Type:: string
Standardverdi:: "Les mer"
Beskrivelse:: Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst
Prop:: size?
Type:: number
Beskrivelse:: Spesifiserer bredde på feltet i antall tegn.
Prop:: type?
Type:: "color" | "date" | "datetime-local" | "email" | "file" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week"
Standardverdi:: "text"
Beskrivelse:: Spesifiserer typen av feltet. Standard er 'text'.
Prop:: omitSearchIcon?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Indikerer om søkeikonet skal utelates.
Prop:: value?
Type:: string
Beskrivelse:: Spesifiserer den nåværende verdien av feltet.
Prop:: autocomplete?
Type:: string
Standardverdi:: "off"
Beskrivelse:: Spesifiserer hvordan type autocomplete feltet har. Standard er 'off'.
Prop:: suffix?
Type:: string
Beskrivelse:: Spesifiserer et suffiks som vises etter feltet.
Prop:: prefix?
Type:: string
Beskrivelse:: Spesifiserer et prefiks som vises før feltet.
Prop:: iconNameRight?
Type:: icon
Beskrivelse:: Spesifiserer navnet på ikonet som vises til høyre for feltet.
Prop:: ariaLabelledby?
Type:: string
Beskrivelse:: Spesifiserer ID-en til elementet som beskriver feltet.
Prop:: ariaDescribedby?
aria-describedby?
Type:: string
Beskrivelse:: Spesifiserer ID-en til elementet som beskriver feltet.
Prop:: required?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Er feltet påkrevd?
Prop:: requiredTag?
Type:: boolean
Beskrivelse:: Indikerer om feltet er påkrevd.
Prop:: requiredText?
Type:: string
Standardverdi:: "Må fylles ut"
Beskrivelse:: Tekst som vises i påkrevd-merkingen
Prop:: optionalTag?
Type:: boolean
Beskrivelse:: Indikerer om feltet er valgfritt.
Prop:: optionalText?
Type:: string
Standardverdi:: "Valgfritt"
Beskrivelse:: Tekst som vises i valgfritt-merkingen
Prop:: tagText?
Type:: string
Beskrivelse:: Tekst som vises i en tag ved siden av label
Prop:: hasError?
Type:: boolean
Beskrivelse:: Indikerer om feltet har en feil.
Prop:: errorMessage?
Type:: string
Beskrivelse:: Tekst som vises under datovelgeren ved feiltilstand
Prop:: disabled?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Indikerer om feltet er deaktivert.
Prop:: inline?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Indikerer om feltet skal vises inline.
Prop:: fullwidth?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Indikerer om feltet skal ta opp full bredde.
Prop:: useWrapper?
Type:: boolean
Standardverdi:: true
Beskrivelse:: Indikerer at feltet skal ha synlig label og hjelpetekst
Prop:: id
Type:: string
Beskrivelse:: Spesifiserer den unike identifikatoren for feltet.
Prop:: counter?
Type:: boolean
Beskrivelse:: Viser teller under feltet. Slås på av seg selv når det finnes en grense å telle mot; sett til false for å skru den av.
Prop:: counterMaxLength?
Type:: number
Beskrivelse:: Spesifiserer maksimal lengde for telleren.
Prop:: inputSize?
input-size?
Type:: "small" | "medium" | "xsmall"
Standardverdi:: "medium"
Beskrivelse:: Visuell størrelse via input-wrapper.
Prop:: hasFieldset?
Type:: boolean
Beskrivelse:: Bruk fieldset og legend i stedet for label.

Events

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

Text input

Test komponenten

Relaterte komponenter

Varianter

States

Størrelser

Retningslinjer for bruk

Bruk text input når

Unngå text input når

Labels/etikett

Gjør slik

Unngå

Plassholder

Gjør slik

Unngå

Bredde

Gjør slik

Unngå

Valgfritt eller påkrevd

Prefiks og suffiks

Hjelpetekst og feilmeldinger

Responsivitet

Universell utforming

Synlig eller skjult label

Hjelpetekst og feilmelding

Riktig type og autofyll

Klikkbare prefiks og suffiks

Unngå plassholder som instruksjon

Inndata

Anatomi

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Egenskaper

PktTextinput

Props

Events