Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

TextField

Oppdatert 30. juni 2023Stabil
GithubYarn FigmaEndringslogg

    Intro

    TextField er et klassisk input element som gir brukere muligheten til å skrive korte tekster eller tall.

    Egnet til:

    • Korte tekster / svar
    • Tall

    Uegnet til:

    • Mer utfyllende og lengre svar
    • Formatert data, eksempelvis markdown

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Åpne eksempel i nytt vindu

    Varianter

    Størrelser

    Komponenten kommer i to størrelser:

    • Medium (standard) brukes både på eksterne og interne flater.
    • Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.

    Skjule label visuelt

    Textarea skal alltid ha en label. I spesielle tilfeller kan label skjules visuelt, f.eks. i tabeller der en select får ledeteksten sin fra tabellheaderen--bruk da ```aria-label``` eller ```aria-labelledby```.

    Read-only

    Readonly-attributtet spesifiserer at et inputfelt i et skjema er skrivebeskyttet. Et skrivebeskyttet felt kan ikke endres, men brukere kan tabbe til det, markere det og kopiere tekst fra det. Til forskjell fra disabled-felter vil innholdet i readonly-felter inkluderes når et skjema sendes inn.

    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.

    GjørEksempel på bruk av label og description. Label: \"Din månedslønn før skatt\" Description: \"Inntekt i norske kroner\"
    Bruk description i tillegg til label når det er behov for mer utfyllende forklaring.
    UnngåEksempel på labeltekst som går over to linjer
    Unngå labeltekst som går over to linjer.

    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.

    GjørTextfield med label \"Din månedslønn før skatt\" og description \"Inntekt i norske kroner\".
    Bruk label og description for å beskrive hva som skal skrives inn i tekstfeltet.
    UnngåTextField med placeholder-tekst
    Ikke bruk placeholder-tekst.

    Tilpass bredden på tekstfeltet

    Tekstfelt bør ha en bredde som er tilpasset det brukeren skal skrive inn. Når tekstfeltene har forskjellig bredde blir det lettere å navigere i skjemaer med mange felter.

    GjørEt inputfelt med størrelse tilpasset innholdet
    Tilpass størrelsen til inputfeltet til innholdet.
    UnngåAlle feltene med samme bredde
    Bruk samme bredde på alle feltene uavhengig av forventet input.

    Input og formatering

    • Bruk `autocomplete` for 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 `name` må inkludere, og helst starte med teksten i dens `label`. (WCAG 2.5.3)
    • Unngå bruk av all-caps og kursiv tekst til labels. Disse er vanskeligere å lese.

    Number-input

    Det kan være fristende å slenge på en `type="number"`, men dette medfører en del problemer man kan lese mer om i denne bloggposten (stackoverflow.blog). En enkel løsning hvis man bare trenger heltall er denne syntaksen som Gov.uk har skrevet en blog om og selv bruker:

    Men trenger man muligheten til å ta imot desimaler eller mer nyansert data vil `type="text"` med js-validering være det enkleste.

    Tilgjengelighet

    Disabled

    Selv om vi fraråder bruk av disabled state generelt, finnes det helt sikkert unntak. Ta kontakt med våre eksperter på universell utforming for å finne best mulig løsning.

    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.

    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" | "time"
    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
    readOnly? boolean
    Read only-state
    className? string
    ref? Ref<HTMLInputElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    TextField extends HTMLInputElement

    Tokens

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

    © 2023 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