Intro
Textarea er et skjemaelement som gir brukere muligheten til å skrive lengre tekster.
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.
Textarea kan vise antall gjenværende tegn som er tillatt å skrive inn. Tallet oppdateres etterhvert som brukeren skriver eller fjerner innhold. NB! Dette er bare en visuell indikator. Faktisk begrensning og validering må håndteres i kode.
Den ekspermentelle prop-en 'UNSAFE_autoScrollbar' gjør at tekstfeltet får en scrollbar når det ikke er mer plass i høyden. Krever display:flex på parent.
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.
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 det ut i ren tekst.
Skjule label visuelt
Textarea 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.
Unngå labeltekst som går over to linjer.
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.
Bredde på tekstfeltet
Optimal bredde på brødtekst er mellom 50 og 75 tegn per linje inkludert mellomrom. Kortere eller lengre tekstlinjer kan gå utover lesbarheten.
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.
Props
Textarea
maxLength?
- Type:
number - Description:
value?
- Type:
string - Description:
defaultValue?
- Type:
string - Description:
maxRows?
- Type:
number - Description:
minRows?
- Type:
number - Description:
label
- Type:
ReactNode - Description:
hideLabel?
- Type:
boolean - Description:
resize?
- Type:
boolean | "vertical" | "horizontal" - Description:
UNSAFE_autoScrollbar?
- Type:
boolean - Description:
i18n?
- Type:
{ counterLeft?: string; counterTooMuch?: string; } | undefined - 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<HTMLTextAreaElement> - Description:
Tokens
| Token | Fallback |
|---|---|
| --ac-textarea-bg | --a-surface-default |
| --ac-textarea-border | --a-border-default |
| --ac-textarea-text | --a-text-default |
| --ac-textarea-placeholder | --a-text-subtle |
| --ac-textarea-hover-border | --a-border-action-hover |
| --ac-textarea-active-border | --a-border-action-selected |
| --ac-textarea-counter-text | --a-text-subtle |
| --ac-textarea-counter-error-text | --a-text-danger |
| --ac-textarea-error-border | --a-border-danger |