Komponenter
TextField
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
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:
type="text" inputMode="numeric"Hvis du trenger muligheten til å ta imot desimaler, kan du bruke inputMode="decimal".
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:
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. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.
| 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 |