Intro
Tekstfelter gir brukere mulighet til å gi korte og konsise svar, og er grunnleggende byggeklosser i utfylling av skjemaer.
Egnet til å:
- La brukeren gi korte svar
Vurder noe annet:
- Om brukeren skal ta et valg
- Om du trenger utfyllende og lengre svar
Har du innspill til komponenten?
Send forslagEksempler
Tilgjengelighet
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.
Skjule label
Vi understreker at tekstfelt i et skjema alltid må ha label. Det finnes også situasjoner hvor vi ikke trenger en synlig label, f.eks. når vi bruker tekstfelt til søk eller inni en tabell. Ved å bruke hideLabel-prop vil label være tilgjengelig bare for skjermlesere.
Bruk
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. Fordi placeholder-teksten forsvinner så snart brukeren begynner å skrive i feltet, må informasjonen uansett gjentas i label eller beskrivelse. Om man skulle brukt placeholder-tekst må den møte kontrastkravene fra WCAG, og da blir teksten så mørk at brukere lett kan tro at feltet allerede er utfylt. Sørg heller for at du skriver den informasjon som trengs til utfylling av feltet i label og beskrivelse.
Tilpass bredden på tekstfeltet
Tekstfelt bør ha en bredde som er tilpasset det brukeren skal skrive i feltet. Når tekstfeltene har forskjellig bredde blir det lettere å navigere i skjemaer med mange tekstfelt.
Retningslinjer
- Bruk
autocompletefor 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 kan også utløse client-side validering av feltets input. - 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, epost-adresser med mellomrom til slutt.
- Dersom input blir automatisk formattert, må dette være synlig for brukere slik at de kan kontrollere om det ble riktig.
- Feltets
namemå inkludere, og helst starte med teksten i denslabel. (WCAG 2.5.3) - Unngå bruk av all-caps og kursiv tekst til labels. Disse er vanskeligere å lese.
Props
TextField
- value? string | number
- Controlled value
- defaultValue? string | number
- Defaults input-value without needing controlled-state
- htmlSize? number
- Exposes the HTML size attribute
- hideLabel? boolean
- If enabled shows the label and description for screenreaders only
- label ReactNode
- TextField label
- type?"number" | "email" | "password" | "tel" | "text" | "url"
- Type of form control. Picking the correct type helps user fill inn their required information
- error? ReactNode
- Error message for element
- errorId? string
- Override internal errorId
- size? "medium" | "small"
- Changes font-size, padding and gaps
- disabled? boolean
- Disables element @note Avoid using if possible for accessibility purposes
- description? ReactNode
- Adds a description to extend labling of a field
- id? string
- Override internal id
- className? string
- ref? Ref<HTMLInputElement>
- TextField extends HTMLInputElement
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 |
| --ac-textfield-error-border | --a-border-danger |