Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

Textarea

Textarea er et skjemaelement som gir brukere muligheten til å skrive lengre tekster.

StabilOppdatert 30. april 2025

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:flex on 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.current to null (or call the ref with null if 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.

TokenFallback
--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