Text input

Status
Figma	✅Publisert
CSS	✅Publisert
Vue	✅Publisert
React	✅Publisert
Dokumentasjon	✅Publisert

Om komponenten

Tekstfelt (også kalt text input og inputfelt) er en komponent som tar imot fritekst fra brukeren. De brukes vanligvis i skjemaer, men kan også brukes andre steder i en tjeneste.

Standard tekstfelt brukes for eksempel til e-post, navn, fødselsnummer og andre typer informasjon som får plass på én linje.

Varianter

Vi har flere mulige variasjoner av tekstfeltet. Det kan brukes helt enkelt med label og inputfelt, eller du kan legge til:

Valgfritt- eller obligatorisk-tag
Prefiks
Suffiks
Hjelpetekst
Ekspanderende hjelpetekst

Farger

Tekstfeltene skal alltid ha $brand-blue på kant og tekst. Det er ikke mulig å endre farge på tekstfeltet.

Slik bruker du komponenten

Label (etikett/ledetekst)

For å fungere godt bør tekstfeltet ha en kort og tydelig ledetekst (label) og det er mulig å legge til hjelpetekst om nødvendig.

Når du skriver label kan det være greit å huske på at:

Man burde være konsis og konsistent slik at brukeren skjønner hva som forventes av hen
Om mulig: hold deg til 1-3 ord og under 20 bokstaver, inkludert mellomrom
Ikke bruk bare store eller bare små bokstaver
Ikke bruk kolon etter label

Valgfritt-/obligatorisk-tag

Til høyre for label kan du velge å ha enten valgfritt-tag eller obligatorisk-tag. Bruk kun én av variantene i din tjeneste eller løsning for å unngå å forvirre brukeren. Vi anbefaler å markere de valgfrie feltene.

Størrelse

Det er ikke påkrevd, men det anbefales at et tekstfelt ikke er bredere enn 500 px.

Visning av text input med standard bredde og anbefalt maks bredde.

Det viktigste er at bredden på tekstfeltet må passe til innholdet brukeren legger inn. F.eks. ved telefonnummer bør ikke tekstfeltet være bredere enn 8 tegn.

Tre forskjellige tekstfelt som viser variert størrelse, telefonnummer, e-post og postnummer.

Feilmelding og validering

Hvis tekstfeltet ikke validerer, vil en feilmelding dukke opp under tekstfeltet som beskriver hva som er galt. Feilmeldingen har tre visuelle indikatorer: en rød ramme, et ikon og selve feilmeldingsteksten. Essensen av hjelpeteksten må også være inkludert i feilmeldingen. Les mer om hvordan du kan skrive en god feilmelding her (ks.no).

Plassholdertekst

Tekstfeltet har mulighet for plassholdertekst, men unngå å bruke plassholdertekst med meningsbærende/viktig innhold. Den er nemlig ikke tilgjengelig for skjermlesere og kan skape forvirring for brukeren. Gå heller for ledetekst og/eller hjelpetekst.

Hjelpetekst

Valgfri hjelpetekst er relevant informasjon som hjelper brukeren med å fylle ut feltet riktig. Det brukes for eksempel ofte til å forklare riktig dataformat.

Når du skriver hjelpetekst, er det viktig at du:

Bruker store bokstaver i setningstil og skriver teksten i de fleste tilfeller som hele setninger.
Dersom du har veldig lang hjelpetekst eller har behov for å legge til lenker og lignende, bruk den ekspanderende hjelpeteksten.

Tekstfelt med vanlig hjelpetekst og ekspanderende hjelpetekst.

Prefiks

Du kan velge å legge til en prefiks i input feltet, dette kan for eksempel være landskode på telefonnummer. Du kan ikke bruke ikon i prefiks-feltet, men du kan bruke det i suffiks.

Suffiks

Suffiksen kan brukes for å definere enhet, et beskrivende ikon eller tekst. Den kan også være klikkbar, for eksempel med et øye for å skjule/vise passord, eller kryss for å fjerne teksten som er fylt inn i tekstfeltet.