Designsystemoversikt

TextInput

TextInput brukes for korte tekstverdier og tallignende felt der brukeren trenger tydelig label, støtte og feilmelding.

Jøkul · Komponenter

Pakke: @fremtind/jokul

Installasjon: Se relevant guide

TextInput er Jøkul sitt standardfelt for korte tekstverdier. Komponenten kombinerer inputfeltet med InputGroup-kontrakten for label, hjelpetekst og feilstatus.

Den lokale forhåndsvisningen bruker samme wrapper- og klassekontrakt som Jøkul selv: `jkl-input-group`, `jkl-text-input` og de tilhørende støtteklassene rundt feltet.

Playgrounden under viser hvordan feltet endrer seg når du bytter justering, enhet, feilstatus og om feltet er forhåndsutfylt.

Eksempel

Props

    • align="left" · unit="none" · inline=false · invalid=false · disabled=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-input/text-input.min.css";
import { TextInput } from "@fremtind/jokul/text-input";

export function Example() {
    return (
        <TextInput
            label="Beløp"
            name="amount"
            placeholder="0"
        />
    );
}

    Hendelser

    Ingen hendelser fra text-input-eksempelet ennå.

    Props

    Jøkul-props

    Jøkul-props som styrer hvordan tekstfeltet oppfører seg og presenteres i docs.

    Prop Type Standard Beskrivelse
    align "left" | "right" "left" Justerer innholdet i feltet. Høyrejustering brukes typisk for beløp eller andre tallfelt.
    unit ReactNode ingen Viser en benevnelse til høyre i feltet, for eksempel `kr`.
    inline boolean false Lar feltet gå inn i mer kompakte oppsett der labelen skjules visuelt, men fortsatt finnes for skjermlesere.
    invalid boolean false Setter error-state på feltet og brukes sammen med en konkret feilmelding.

    React-props

    Props på `TextInput` og `InputGroup` som påvirker label, hjelp og wrapperoppførsel.

    Prop Type Standard Beskrivelse
    data-testautoid string ingen Stabil test-id fra Jøkul sin kjernetype når feltet må spores i automatiserte tester.
    id string auto-generert når mulig Lar deg styre koblingen mellom label, support-tekst og inputelementet eksplisitt.
    label ReactNode påkrevd Labelteksten som forklarer hva brukeren skal skrive inn.
    helpLabel ReactNode ingen Hjelpetekst under feltet når brukeren trenger ekstra føring uten at feltet er ugyldig.
    errorLabel ReactNode ingen Feilmelding under feltet når `invalid` er satt eller valideringen slår inn.
    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 trange eller veldig romslige oppsett.
    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.
    description ReactNode ingen Ekstra beskrivelsetekst mellom label og felt når brukeren trenger mer kontekst.
    tooltip ReactNode ingen Lar labelen få en tilknyttet forklaring uten å utvide hjelpeteksten permanent.
    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 HTML-attributter som sendes videre til det underliggende `<input>`-elementet.

    Prop Type Standard Beskrivelse
    defaultValue string tom streng Setter startverdien i et ukontrollert felt når du vil vise et forhåndsutfylt eksempel.
    placeholder string ingen Kort hint om format eller forventet verdi. Skal ikke erstatte labelen.
    disabled boolean false Brukes når feltet midlertidig ikke kan redigeres.
    type string "text" Bruk riktig inputtype når feltet handler om e-post, tall, passord eller andre spesifikke data.
    width string auto Lar deg styre bredden på feltet når innholdet bør bruke en bestemt plass i layouten.
    action Action deprecated Utfaset API for handlingsknapp i feltet. Bruk `actionButton` i ny kode.
    actionButton ReactElement ingen Element som vises til høyre i feltet, for eksempel for å vise eller skjule passord.
    maxLength number ingen Setter maxlength og hjelper komponenten å tilpasse bredden når feltet representerer korte, faste verdier.
    inputClassName string ingen Ekstra klasse på det underliggende `<input>`-elementet når bare feltet må styles eller spores.

    ARIA-props

    Tilgjengelighetsattributter som kobler feltet til støtte- og feiltekst.

    Prop Type Standard Beskrivelse
    aria-describedby string ingen Kobler hjelpetekst eller feilmelding til feltet.
    aria-invalid boolean false Bør settes sammen med en konkret feilmelding når feltet er ugyldig.

    Når du skal bruke TextInput

    Bruk TextInput for korte tekstfelt som navn, referanser, beløp eller andre enkle verdier som får plass på én linje.

    Hvis brukeren skal skrive lengre fritekst, er TextArea ofte et bedre valg fordi det gir mer plass og riktigere forventning.

    Tilgjengelighet

    Tekstfeltet må alltid ha et tilgjengelig navn. I Jøkul håndteres dette gjennom InputGroup, men labelteksten må fortsatt være konkret og forståelig.

    Når feltet er ugyldig, må feilmeldingen forklare både hva som er feil og hvordan brukeren kan rette det.

    Komponentprofil

    Klient-JS
    Ingen
    Hydrering
    Ingen
    Ikoner
    Påkrevd
    Dekket API-props
    22
    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-input/text-input.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

    • TextInput deler støtte- og feilmeldingskontrakt med Jøkul sine form support-ikoner, så ikonstilen må være en del av komponentoppsettet.
    • Uten ikonimporten mister feil- og hjelpetilstandene et sentralt visuelt signal som Jøkul forventer i feltfamilien.

    Propkontrakt

    Dekning: Komplett

    Scope: Pakkens offentlige props, uten generiske DOM-props

    • TextInput · TextInputProps · @fremtind/jokul/text-input · 22 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 tekstfelt; Tab flytter fokus og piltaster flytter markøren i feltet.

    Semantikk som kreves

    • Tekstfeltet trenger en tydelig label som beskriver hva som forventes i feltet.
    • Bruk feilmelding eller hjelpetekst når format, lengde eller enhet ikke er åpenbar.
    • Vis enhet som støtte, men ikke la den erstatte labelen eller feltets formål.

    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 placeholder ikke bærer viktig informasjon som burde stå i label eller hjelpetekst.
    • Bekreft at tallfelt og høyrejustering faktisk hjelper lesbarheten i konteksten.

    Ytelse

    • Tekstfeltet rendres som vanlig HTML og CSS i docs; ingen ekstra klient-JS trengs for grunnoppførselen.
    • Hold action-knapper og ekstra pynt rundt feltet til situasjoner der de faktisk hjelper oppgaven.

    Relatert