Komponenter
Textarea
Textarea er et skjemaelement som gir brukere muligheten til å skrive lengre tekster.
Egnet til:
- Lengre tekster / svar
Uegnet til:
- Formatert data, eksempelvis markdown
Eksempler
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:
Allowed character-count for content
This is just a visual indicator! You will still need to handle actual character-limits/validation if needed.
value?
- Type:
string - Description:
Controlled value
defaultValue?
- Type:
string - Description:
Defaults input-value without needing controlled-state
maxRows?
- Type:
number - Description:
Maximum number of character rows to display.
minRows?
- Type:
number - Description:
Minimum number of character-rows to display when empty.
label
- Type:
ReactNode - Description:
Textarea label.
hideLabel?
- Type:
boolean - Description:
If enabled shows the label and description for screenreaders only.
resize?
- Type:
boolean | "vertical" | "horizontal" - Description:
Enables resizing of field.
UNSAFE_autoScrollbar?
- Type:
boolean - Description:
Textarea will stop growing and get a scrollbar when there's no more room to grow. Requires
display:flexon the parent. Experimental feature that may be removed or get breaking changes in a minor version.
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<HTMLTextAreaElement> - 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
i18n?
- Deprecated:Use `<Provider />`-component
- Type:
{ counterLeft?: string; counterTooMuch?: string; } | undefined - Description:
i18n-translations for counter-text
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-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 |