Input Wrapper

Status

Figma 🗄
CSS 🗄
Vue 🗄
React 🗄
Dokumentasjon 🗄

Om komponenten

Input wrapperen legger til en standardpakke med elementer rundt hvilket som helst inputfelt. Den brukes i alle inputfeltene i Punkt.

(kodeeksempel)

Slik bruker du komponenten

Input wrapperen inneholder flere elementer:

  • Label (etikett/ledetekst)
  • Valgfritt-/obligatorisk-tag
  • Hjelpetekst
  • Ekspanderende hjelpetekst
  • Feilmelding og validering

Label (etikett/ledetekst)

For å fungere godt bør tekstfeltet ha en kort og tydelig ledetekst (label). I spesielle tilfeller kan label skjules visuelt, f.eks. i tabeller der en select får ledeteksten sin fra tabellheaderen (husk da at utvikleren på teamet på kode dette riktig i ARIA, se kodedokumentasjonen for mer informasjon).

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
  • Aldri bruk kolon etter label

Valgfritt-/obligatorisk-tag

Til høyre for label (etikett/ledeteksten) kan du velge 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.

Hjelpetekst

Hjelpetekst er relevant informasjon som hjelper brukeren med å fylle ut feltet riktig. Det brukes for eksempel ofte til å forklare riktig dataformat eller utdype hvor man finner informasjonen man trenger for å fylle inn feltet.

Label og hjelpetekst er alltid plassert over tekstfeltet slik at det er godt synlig på små skjermer og ikke kommer i konflikt med feilmelding.

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

  • Skriver tydelig og forståelig.
  • Bruker store bokstaver i setningstil og skriver teksten i de fleste tilfeller som hele setninger.

Ekspanderende hjelptekst

Dersom du har veldig lang hjelpetekst eller har behov for å legge til lenker og lignende, anbefaler vi å bruke muligheten for ekspanderende hjelpetekst.

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).

Anatomi

  1. Label (etikett/ledetekst)
  2. Valgfritt-tag
  3. Obligatorisk-tag
  4. Hjelpetekst
  5. Ekspanderende hjelpetekst: knapp
  6. Ekspanderende hjelpetekst: innhold
  7. Input-felt (kan være ulike typer: text area, text input, radio button osv osv.)
  8. Feilmelding