Input Wrapper

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