Komponenter
TextField
TextField er et vanlig input-element som gir brukeren mulighet til å skrive korte tekster eller tall.
Egnet til:
- Korte tekster / svar
- Tall
Uegnet til:
- Lange svar
- Formatert tekst, eksempelvis markdown
Eksempler
Retningslinjer
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 på felter som spør om personlig informasjon om brukeren som fyller ut skjemaet. Skru autocomplete av på felter som gjelder en annen person, f.eks. barn, ektefelle e.l. (WCAG 1.3.5)
- Bruk input-typen 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. - Ikke gjør unødvendig streng validering. Godta input fra brukeren så lenge den er forståelig, f.eks. telefonnumre med mellomrom, kontonumre med punktum eller 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 bli synlig for brukeren slik at de kan kontrollere om det ble riktig.
Number-input
Det kan være fristende å slenge på en type="number", men dette medfører en del problemer du kan lese mer om i denne bloggposten (stackoverflow.blog). En enkel løsning hvis man bare trenger heltall er å bruke inputMode="numeric" i stedet, som gir talltastatur på mobil.
Hvis du trenger muligheten til å ta imot desimaler, kan du bruke inputMode="decimal".
Tilgjengelighet
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.
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:
Controlled value
defaultValue?
- Type:
string | number - Description:
Defaults input-value without needing controlled-state
htmlSize?
- Type:
number - Description:
Exposes the HTML size attribute
hideLabel?
- Type:
boolean - Description:
If enabled shows the label and description for screenreaders only
label
- Type:
ReactNode - Description:
TextField label
type?
- Type:
"number" | "email" | "password" | "tel" | "text" | "url" | "time" - Default:
""text"" - Description:
Type of form control. Picking the correct type helps user fill inn their required information
error?
- Type:
ReactNode - Description:
Error message.
errorId?
- Type:
string - Description:
Override internal errorId.
size?
- Type:
"medium" | "small" - Default:
"null" - Description:
Changes font-size, padding and gaps.
disabled?
- Type:
boolean - Description:
Avoid using if possible for accessibility purposes.
Disables element.
description?
- Type:
ReactNode - Description:
Adds a description to extend the labeling.
id?
- Type:
string - Description:
Override internal id.
readOnly?
- Type:
boolean - Description:
Read-only state.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLInputElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
Tokens
Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Les mer om det nye themingsystemet.
| 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 |