Intro
TextField er et klassisk input-element som gir brukere muligheten til å skrive korte tekster eller tall.
Egnet til:
- Korte tekster / svar
- Tall
Uegnet til:
- Mer utfyllende og lengre svar
- Formatert data, eksempelvis markdown
Eksempler
Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.
Label må være meningsfull selv om den skjules, siden den fortsatt leses av skjermlesere.
Readonly-attributtet gjør at verdien ikke kan endres, men brukere vil fortsatt kunne markere og kopiere fra feltet. Til forskjell fra disabled-felter vil brukere også kunne tabbe til det, og feltet vil inkluderes når skjemaet sendes inn.
Skjule label visuelt
TextField skal alltid ha en label. I spesielle tilfeller kan label skjules visuelt med propen hideLabel
, f.eks. i tabeller der feltet får ledeteksten sin fra tabellheaderen. Selv om labelen skjules er det viktig at den er meningsfull siden den fortsatt leses av skjermlesere.
Retningslinjer
Plassering av label og description
Label og description er alltid plassert over tekstfeltet slik at det er godt synlig på små skjermer og ikke kommer i konflikt med feilmelding.
Ikke bruk placeholder-tekst
Vi fraråder bruk av placeholder-tekst. Denne teksten forsvinner når det skrives i feltet. Derfor må informasjonen uansett gjentas i label eller beskrivelse. Kontrastkravene i WCAG gjelder for placeholder, og da blir teksten så mørk at det er lett å tro at feltet er utfylt.
Tilpass bredden på tekstfeltet
Tekstfelt bør ha en bredde som er tilpasset det brukeren skal skrive inn. Når tekstfeltene har forskjellig bredde blir det lettere å navigere i skjemaer med mange felter.
Input og formatering
- Bruk autoComplete for felter som mottar personlig informasjon. For felter som etterspør personlig informasjon om en annen person enn brukeren, skru autocomplete av. (WCAG 1.3.5)
- Bruk gjerne inputtyper som tilsvarer informasjonstypen du ber om (
tel
,search
,email
, osv.). Disse tilbyr mobilbrukere et tastatur som er tilpasset inputtypen, men ta i betraktning at de også kan utløse klientsidevalidering. Se også inputMode. - Vær generøs i hva du aksepterer av data. Godta input fra brukeren så lenge den er forståelig, f.eks. telefonnumre med mellomrom, personnumre med punktum, e-postadresser med mellomrom til slutt.
- Dersom input blir automatisk formatert, bør dette gjøres på en måte som ikke forstyrrer utfyllingen. Samtidig bør formateringen blir synlig for brukeren slik at de kan kontrollere om det ble riktig.
- Unngå bruk av all-caps og kursiv tekst i label. Disse er vanskeligere å lese.
Number-input
Det kan være fristende å slenge på en type="number"
, men dette medfører en del problemer man kan lese mer om i denne bloggposten (stackoverflow.blog). En enkel løsning hvis man bare trenger heltall er å bruke inputMode="numeric"
, som gir talltastatur på mobil:
Hvis du trenger muligheten til å ta imot desimaler, kan du bruke inputMode="decimal"
.
Relevante lenker
Tilgjengelighet
Disabled
Vi fraråder bruk av disabled state. Vurder om du trenger å vise feltet i det hele tatt, om du heller kan bruke readOnly
, eller bare kan skrive ut informasjonen i ren tekst.
Prefix/suffix
Fra et uu-perspektiv anbefaler vi å unngå prefix eller suffix i forbindelse med inputfelter. Dette kan føre til problemer for folk som bruker autofill-verktøy, skjermlesere og skjermforstørrere. Dessuten kan slik informasjon inn i feltet føre til at folk opplever feltet som allerede fylt ut. Bruk heller en label som forklarer hva innholdet i feltet skal være inkludert enhet, uten forkortelser.
Props
TextField
value?
- Type:
string | number
- Description:
defaultValue?
- Type:
string | number
- Description:
htmlSize?
- Type:
number
- Description:
hideLabel?
- Type:
boolean
- Description:
label
- Type:
ReactNode
- Description:
type?
- Type:
"number" | "email" | "password" | "tel" | "text" | "url" | "time"
- Default:"text"
- Description:
error?
- Type:
ReactNode
- Description:
errorId?
- Type:
string
- Description:
size?
- Type:
"medium" | "small"
- Description:
disabled?
- Type:
boolean
- Description:
description?
- Type:
ReactNode
- Description:
id?
- Type:
string
- Description:
readOnly?
- Type:
boolean
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLInputElement>
- Description:
Tokens
Token | Fallback |
---|---|
--ac-textfield-bg | --a-surface-default |
--ac-textfield-border | --a-border-default |
--ac-textfield-text | --a-text-default |
--ac-textfield-placeholder | --a-text-subtle |
--ac-textfield-hover-border | --a-border-action-hover |
--ac-textfield-active-border | --a-border-action-selected |
--ac-textfield-error-border | --a-border-danger |