docs: textfield updated (digdir#1973)

Co-authored-by: Michael Marszalek <[email protected]>
Co-authored-by: Marianne Røsvik <[email protected]>
Co-authored-by: Tobias Barsnes <[email protected]>

packages/react/src/components/form/Textfield/Textfield.mdx

@@ -6,6 +6,8 @@ import * as TextfieldStories from './Textfield.stories';
 
 # Textfield
 
+`Textfield` kalles tekstfelt på norsk. Det er et inndatafelt som for eksempel gir brukerne mulighet til å skrive korte tekster eller tall.
+
 <Primary />
 <Controls />
 
@@ -28,3 +30,52 @@ import * as TextfieldStories from './Textfield.stories';
 ## Html Size
 
 <Canvas of={TextfieldStories.HtmlSize} />
+
+## Retningslinjer for når du skal bruke `Textfield`
+
+Vi bruker tekstfelt når vi vil gi brukeren mulighet til å skrive tekst/svar på maks. én linje, Det kan for eksempel være navn eller telefonnummer.
+
+Passer til å
+
+- gi mulighet for korte tekster eller svar
+- legge inn tall, for eksempel et telefonnummer
+
+Passer ikke til å
+
+- gi lengre svar, bruk heller `Textarea`
+- legge inn formaterte data, som markdown
+  <br />
+
+### Plassering av ledeteksten
+
+Ledeteksten og en eventuell beskrivelse skal alltid stå over tekstfeltet. Da er de lette å se på små skjermer og hindres ikke av eventuelle feilmeldinger.
+
+### Unngå plassholdertekster
+
+Plassholdertekster forsvinner når brukerne skriver i feltet. Det er derfor bedre å inkludere hint og viktig informasjon i selve ledeteksten eller den tilhørende beskrivelsen.
+
+### Tilpass bredden på tekstfeltet
+
+Tilpass bredden til det brukerne skal skrive inn, kort bredde til telefonnummer og bredere til stedsnavn. Ulik bredde på feltene gjør det enklere å navigere i skjemaer som har mange felter.
+
+### Inndata og formatering
+
+- Bruk `autoComplete` for felter som mottar personlig informasjon. Hvis feltet skal be om personopplysninger om en annen person enn brukeren, må du skru `autoComplete` av (WCAG 1.3.5).
+- Bruk gjerne inndatatyper som viser hva du ber om, for eksempel telefonnummer og e-post. Slike inndatatyper gir mobilbrukere et tastatur som passer til det de skal angi, for eksempel et numerisk tastatur for telefonnummer, men de kan også utløse validering på klientsiden.
+- Godta det meste av inndata fra brukerne, så lenge det er forståelig. Eksempler kan være kontonummer med punktum, telefonnummer med mellomrom eller mellomrom på slutten av en e-postadresse.
+- Pass på at brukerne ser inndata som formateres automatisk, men uten at det forstyrrer dem mens de fyller ut.
+- Ikke bruk bare store bokstaver eller kursiv tekst i ledeteksten. Det er vanskelig å lese.
+
+## Tekst i komponenten
+
+Det skal alltid være ledetekst på `Textfield`. I spesielle tilfeller kan vi skjule ledeteksten med `hidelabel`. Det kan for eksempel være i tabeller, hvis feltet får ledeteksten fra tabelloverskriften. Selv om vi har tenkt å skjule ledeteksten, må vi alltid skrive en ledetekst som gir mening, siden den leses opp av skjermlesere.
+
+## Tilgjengelighet
+
+### Ikke bruk deaktiverte felt
+
+Ikke bruk deaktivert tilstand (disabled state) på tekstfelt. Tenk heller over om du trenger å vise feltet i det hele tatt, eller om du heller kan skrive informasjonen ut i ren tekst eller bruke Read Only.
+
+### Prefiks og suffiks
+
+Prefiks og suffiks er et ekstra visuelt hjelpemiddel, som blir ignorert av skjermlesere. Vi må alltid ha en beskrivende ledetekst. Prefiks og suffiks er plassert utenfor inndatafeltene de tilhører. Da unngår vi at de ikke skaper trøbbel i noen nettlesere, som kan sette inn et ikon i inndatafeltet (for eksempel ikoner for å vise eller lage passord).