TextField

Om komponenten

TextField (også kalt Input og Input field) er et skjemaelement som gir brukeren mulighet til å skrive inn korte tekster.

Egnet til:

• Når bruker skal fylle inn for eksempel navn, bruksenhetsnummer, adresse og annen informasjon som får plass på én linje

Uegnet til:

• Når brukeren bare kan skrive inn ett alternativ fra en forhåndsdefinert liste. Se Select, RadioButton eller Checkbox-group i stedet.
• Når bruker blir bedt om å for eksempel beskrive noe. Bruk da heller TextArea

Varianter

Vi har fire varianter av TextField.

Standard

Standard input-felt

<TextField
  label="Navn"
  description="Fornavn, mellomnavn og etternavn"
/>

Prefiks

Brukes til telefonnummer

<TextField
  label="Telefonnummer"
  leftAddon="+47"
  textAlign="left"
  withAddonDivider
/>

Suffiks

Brukes til input som er relatert til suffix, som for eksempel kroner, kilo, liter osv.

<TextField
  label="Egenkapital"
  rightAddon="kr"
  textAlign="right"
  withAddonDivider
/>

Ikon - høyre

Input-felt med støtte for ikoner, som hjelper bruker med å forstå formålet. For eksempel til passord eller dato.

<TextField
  label="Velg passende visningsdato"
  placeholder="dd/mm/åååå"
  rightAddon={<Calendar className="pointer-events-none" />}
/>

Retningslinjer

Påkrevd vs valgfritt

I Obos bruker vi ikke påkrevd eller asterisk (*). Vi merkerer label med “Valgfritt”. Det er viktig å tenke på datatilsynets dataminimeringspunkt - “Er dette feltet helt nødvendig for å iverksette prosesser?”

Label

Label er påkrevd. Skriv den kort og konsis.

Placeholder

Ikke bruk placeholder som hjelpetekst.

Feltets lengde

For gitte inputs som for eksempel telefonnummer hvor vi vet at det er 8-siffer, så skal feltet ha antall tegns lengde. Inputfelt kan kun ha en maks lengde på 500px

Ikke bruk kolon

Formatering

Text-input har en fast høyde og brukes til å legge inn enklet innput i fritt format med en hvilken som helst kombinasjon av bokstaver, tall eller symboler.

Anatomi

1. Label Tekst som informerer brukeren om innholdet de må skrive inn i feltet. Det er påkrevd med mindre det foreligger et unntakstilfelle.
2. Beskrivelse Hjelpetekst som kan gi ekstra hjelp eller kontekst til brukeren. Brukes ofte for å forklare riktig dataformat.
3. Verdi Innholdet brukeren har skrevet inn i feltet.
4. Field Kontaineren der en bruker legger inn data. Må oppfylle 3:1 ikke-tekstkontrastkrav. (non-text contrast)

Format

Det er mulig å sette max- og min-lengde, samt å justere bredden på feltene:

<TextField
  description="Bruksenhetsnummeret, som tidligere ble kalt bolignummer, består av en bokstav og fire tall. F.eks. H0101"
  label="Bruksenhetsnummer"
  maxLength={5}
  minLength={5}
  size={5}
/>

Validering

Det er innebygget støtte for påkrevde felter:

<form
  onSubmit={(e) => e.preventDefault()}
  className="grid gap-6"
>
  <TextField
    isRequired
    label="Navn"
  />
  <Button type="submit" className="w-fit">
    Send inn
  </Button>
</form>

Det er også mulig å vise en vilkårlig feilmelding:

<TextField
  label="Navn"
  errorMessage="Her er det noe feil!"
/>

Controlled

function(){
  const [value, setValue] = React.useState("");

return <TextField
  label="Beløp"
  value={value}
  onChange={setValue}
/>
}

Universell utforming

Husk på

• Skjemaelementer burde ha en en-kolonnes layout, og hvert element skal ha sin egen label for å beskrive bruk. Om label av en eller annen grunn ikke skal vises skal den fortsatt finnes, men bruke klassen pkt-sr-only slik at skjemaet fortsatt er brukervennlig.
• Alle tekstfelt bør ha et tilknyttet label (ledetekst) eller instruksjon som viser hvordan skjemaet skal fylles ut, inkludert informasjon om obligatoriske felt.
• Label (ledeteksten) bør være koblet til tekstfeltet i koden slik at skjermlesere kan lese opp riktig informasjon. Komplekse skjema kan kreve mer hjelp enn bare enn labels.
• Bruker du symboler i tekstfeltet bør symbolene enten være logiske og kjente, eller så må de forklares før de brukes for å unngå forvirring.
• Feilmeldinger bør være kodet som tekst og identifisere det spesifikke skjemaelementet hvor feilen oppstod. Feilmeldingen må beskrive feilen og være synlig uten at brukeren gjør noen ekstra handlinger.
• 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

Sjekkliste

✓ Alle skjemaelementene har tilknyttet label eller instruksjon

✓ Det er tydelig merket hvilke felter som er valgfrie

✓ Feilmeldinger er kodet som tekst og er i nærheten av det spesifikke tekstfeltet der feilen oppstod

✓ Feilmeldinger er tilgjengelig for skjermleser og keyboard-navigering

Les mer

WCAG 2.4.6 Heading and Labels (AA)

WCAG 1.3.1 Info and Relationships (A)

WCAG 3.2.2 On Input (A)

WCAG 3.2.1 On Focus (A)

Interaksjon

Tastatur