Designsystemoversikt

TextArea

TextArea brukes når brukeren må kunne skrive et svar eller en beskrivelse som naturlig blir flere linjer lang.

Jøkul · Komponenter

Pakke: @fremtind/jokul

Installasjon: Se relevant guide

TextArea bygger videre på Jøkul sin InputGroup-familie og deler mye av kontrakten med andre skjemafelt: label, støtte-/feiltekst og tydelig fokusmarkering.

Det som skiller komponenten ut er hvordan den håndterer høyde, teller og lange svar. Lokale docs bør derfor vise nettopp disse valgene i stedet for bare et statisk textarea-eksempel.

Playgrounden under lar deg styre åpnet høyde, auto-expansion, teller, verdi og feilstatus direkte.

Eksempel

Props

    • rows=7 · startOpen=false · autoExpand=false · counter=false · invalid=false · value="empty"

    Kode

    React · tsx
    import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/icon/icon.min.css";
import "@fremtind/jokul/styles/fonts/webfonts.min.css";
import "@fremtind/jokul/styles/components/input-group/input-group.min.css";
import "@fremtind/jokul/styles/components/text-area/text-area.min.css";
import { TextArea } from "@fremtind/jokul/text-area";

export function Example() {
    return (
        <TextArea
            label="Hva trenger du hjelp til?"
        />
    );
}

    Hendelser

    Ingen hendelser fra text-area-eksempelet ennå.

    Props

    Jøkul-props

    Jøkul-props som styrer hvordan tekstfeltet åpner, vokser og viser teller.

    Prop Type Standard Beskrivelse
    rows number 7 Bestemmer hvor mange tekstlinjer feltet ekspanderer til når det åpnes eller får fokus.
    startOpen boolean false Lar feltet starte i åpen høyde i stedet for å ekspandere først ved fokus eller innhold.
    autoExpand boolean false Lar feltet vokse med innholdet i stedet for å bruke intern scrolling.
    counter { maxLength: number; hideProgress?: boolean } ingen teller Viser tegnteller og progresjonslinje når brukeren må forholde seg til en maksimumslengde.

    React-props

    Props som navngir feltet og kobler det til hjelp eller feilmeldinger i InputGroup-familien.

    Prop Type Standard Beskrivelse
    data-testautoid string ingen Stabil test-id fra Jøkul sin kjernetype når feltet må spores i ende-til-ende-tester.
    id string auto-generert når mulig Gir deg kontroll over koblingen mellom label, support-tekst og textarea-elementet.
    label ReactNode påkrevd Labelteksten som forklarer hva brukeren skal beskrive i feltet.
    className string ingen Ekstra klasse på wrapperen når feltet må kobles til lokal layout eller sporing.
    data-testid string ingen Testkrok på wrapperen når teamet bruker `data-testid` i komponenttester.
    data-size "small" | "medium" | "large" arver størrelse Lar feltet følge en eksplisitt størrelseskontrakt i tettpakkede skjemaer.
    labelProps Omit<LabelProps, "children" | "htmlFor" | "standAlone"> ingen Styrer label-varianten eller skjuler labelen visuelt uten å miste koblingen til feltet.
    supportLabelProps Omit<SupportLabelProps, "id" | "errorLabel" | "helpLabel"> ingen Tilpasser hvordan hjelp- eller feilmeldingen under feltet rendres.
    helpLabel ReactNode ingen Kort støttetekst når brukeren trenger føring om format eller detaljnivå.
    errorLabel ReactNode ingen Feilmelding som forklarer hva som mangler eller er ugyldig i teksten.
    inline boolean false Lar feltet inngå i mer kompakte oppsett der labelen skjules visuelt, men fortsatt finnes for skjermlesere.
    description ReactNode ingen Ekstra beskrivelse mellom label og felt når brukeren trenger mer kontekst før hen begynner å skrive.
    tooltip ReactNode ingen Lar labelen få en tilknyttet forklaring uten å gjøre hjelpeteksten permanent synlig.
    style CSSProperties ingen inline-stiler Brukes når wrapperen trenger inline-stiler i en avgrenset layout.
    render (props: InputProps) => JSX.Element ingen custom render Avansert escape hatch når InputGroup-familien må rendres via en egendefinert funksjon.

    Native HTML-props

    Native textarea-attributter som settes på det underliggende elementet.

    Prop Type Standard Beskrivelse
    defaultValue string tom streng Setter startteksten i et ukontrollert felt når du vil vise et forhåndsutfylt eksempel.
    placeholder string " " Brukes internt for å styre høydeoverganger og kan suppleres med et kort hint, men skal ikke erstatte labelen.

    ARIA-props

    Tilgjengelighetsattributter som gjør støtte- og feilmeldinger lesbare for hjelpemidler.

    Prop Type Standard Beskrivelse
    aria-describedby string ingen Kobler hjelpetekst eller feilmelding til feltet.
    aria-invalid boolean false Settes sammen med en konkret feilmelding når innholdet ikke er gyldig nok.

    Når du skal bruke TextArea

    Bruk TextArea når svaret forventes å være mer enn én kort verdi, for eksempel en beskrivelse, begrunnelse eller fritekstmelding.

    Hvis brukeren bare trenger å skrive et kort svar, er TextInput enklere å skanne og raskere å fylle ut.

    Tilgjengelighet

    Flerlinjefelt trenger like tydelig label og feilmelding som andre skjemakontroller, selv om de ofte brukes til mer ustrukturert innhold.

    Intern scrolling i tekstfelt kan gjøre det vanskeligere å holde oversikt over innholdet. AutoExpand eller større åpningshøyde kan være bedre når det er plass.

    Komponentprofil

    Klient-JS
    Ingen
    Hydrering
    Ingen
    Ikoner
    Påkrevd
    Dekket API-props
    19
    Playground-kontroller
    6
    Delkomponenter
    0
    Anatomideler
    0
    Komposisjoner
    0
    Utfasete props
    0

    Stiler

    • @fremtind/jokul/styles/core/core.css
    • @fremtind/jokul/styles/components/input-group/input-group.min.css
    • @fremtind/jokul/styles/components/text-area/text-area.min.css
    • @fremtind/jokul/styles/components/icon/icon.min.css
    • @fremtind/jokul/styles/fonts/webfonts.min.css

    Ikonkontrakt

    Bruk: Påkrevd

    Stilimport: @fremtind/jokul/styles/components/icon/icon.min.css

    Fontimport: @fremtind/jokul/styles/fonts/webfonts.min.css

    • TextArea deler støtte- og feilmeldingskontrakt med resten av Jøkul sine skjemafelt, inkludert ikonbruk i error-state.
    • Når feltet bruker teller eller feilstatus, er både input-group-stiler og ikonoppsett en del av den visuelle kontrakten.

    Propkontrakt

    Dekning: Komplett

    Scope: Pakkens offentlige props, uten generiske DOM-props

    • TextArea · TextAreaProps · @fremtind/jokul/text-area · 19 props
    • Dekningen følger offentlige props som kommer fra Jøkul-pakken og dens egne basetyper, men ikke generiske DOM-props fra React.

    Tilgjengelighet

    Tastatur: Følger native tastaturstøtte for textarea; Tab flytter fokus, Enter lager linjeskift, og markøren flyttes med piltaster.

    Semantikk som kreves

    • Gi feltet en tydelig label som beskriver hva slags tekst brukeren skal skrive.
    • Bruk TextArea når innholdet naturlig kan bli flere linjer langt, ikke som standardfelt for korte svar.
    • Vis teller bare når grensen faktisk er viktig for brukeren å forholde seg til.

    Automatiserte kontroller

    • Dokssiden inngår i prosjektets route smoke og a11y-kjøring.
    • Forhåndsvisningen rendres server-side uten Astro islands eller klienthydrering.

    Manuelle kontroller

    • Bekreft at label og eventuell hjelpetekst gjør det tydelig hvor mye detailjnivå brukeren forventes å gi.
    • Bekreft at autoExpand og startOpen faktisk hjelper lese- og skriveopplevelsen i skjemaet.

    Ytelse

    • Docs-siden rendrer TextArea som vanlig HTML og CSS uten klienthydrering.
    • AutoExpand og teller kan gjøre feltet mer dynamisk, så bruk dem bare når de faktisk hjelper oppgaven.

    Relatert