Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

Textarea

Oppdatert 30. april 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
    • Skjule label visuelt
  • Retningslinjer
    • Plassering av label og description
    • Ikke bruk placeholder-tekst
    • Bredde på tekstfeltet
  • Tilgjengelighet
    • Disabled
  • Props
    • Textarea
  • Tokens

Intro

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

Egnet til:

  • Lengre tekster / svar

Uegnet til:

  • Formatert data, eksempelvis markdown

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

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:

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:

i18n?

  • Deprecated:
    Use `<Provider />`-component
  • Type:
    { counterLeft?: string; counterTooMuch?: string; } | undefined
  • Description:

Tokens

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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack