TextInput

TextInput er en enkeltlinjers tekstinndatafelt. Komponenten inkluderer label, feilmelding og hjelpetekst i ett og håndterer tilgjengelighet automatisk — label er koblet til input via htmlFor/id. Alle skjema-primitiver i Jøkul følger samme API-mønster.

Fullt navn

Props

Props
Prop	Type	Påkrevd	Standard	Beskrivelse
`label`Egendefinert	`string`	Ja	—	Synlig label over inputfeltet. Kobles automatisk til input-elementet for tilgjengelighet. Bruk et beskrivende substantiv, f.eks. «Navn» eller «E-postadresse».
`value`Native HTML	`string`	Nei	—	Kontrollert verdi. Bruk sammen med onChange for kontrollert komponent-mønster.
`defaultValue`Native HTML	`string`	Nei	—	Initiell verdi for ukontrollert bruk. Ikke bruk sammen med value.
`onChange`React	`React.ChangeEventHandler<HTMLInputElement>`	Nei	—	Kalles ved hvert tastetrykk. Brukes i kontrollert komponent-mønster.
`errorLabel`Egendefinert	`string`	Nei	—	Feilmelding vist under inputfeltet med rød ramme. Vis kun ved faktisk valideringsfeil — ikke vis tomt errorLabel. Tømmes automatisk når verdien er gyldig.
`helpLabel`Egendefinert	`string`	Nei	—	Hjelpetekst vist under label. Brukes for format-hint eller kortfattede instruksjoner. Vises ikke når errorLabel er satt.
`placeholder`Native HTML	`string`	Nei	—	Plassholdertekst i tomt felt. Bruk kun for eksempelverdi, aldri som erstatning for label. Ikke bruk instruksjoner som placeholder.
`disabled`Native HTML	`boolean`	Nei	`false`	Deaktiverer feltet. Deaktiverte felter sendes ikke med i form-innsending.
`readOnly`Native HTML	`boolean`	Nei	`false`	Gjør feltet skrivebeskyttet. Brukeren kan markere og kopiere verdien, men ikke endre den.
`type`Native HTML	`"text" \| "email" \| "password" \| "tel" \| "url" \| "search" \| "number"`	Nei	`"text"`	HTML input-type. Velg riktig type for å få riktig tastatur på mobil og semantisk validering.
`autoComplete`Native HTML	`string`	Nei	—	HTML autocomplete-attributt. Bruk alltid autocomplete="email", autocomplete="name" etc. for skjemafelt som brukere forventer autofullfør for.

Utfasede props

Utfasede props
Prop	Type	Påkrevd	Standard	Beskrivelse
`action`EgendefinertUtfaset	`Action`	Nei	—	Handlingsknapp integrert i inputfeltet.

Eksempler

Grunnleggende bruk

Et enkelt kontrollert inputfelt. Legg alltid til label og koble onChange til state.

Fullt navn

Med hjelpetekst

helpLabel brukes for format-hint eller instruksjoner. Vises rett under label, ikke som placeholder.

Fødselsnummer

11 siffer, f.eks. 01010112345

Med feilmelding

errorLabel erstatter helpLabel og endrer feltet til feil-tilstand. Vis kun ved faktisk feil — ikke initialiser med feilmelding.

E-postadresse

Skriv inn en gyldig e-postadresse

Skrivebeskyttet

readOnly passer for verdier brukeren skal se men ikke endre, f.eks. beregnet verdi eller hentet data.

Organisasjonsnummer

Migrering

Disse eksemplene viser hvordan du erstatter utfasede props med den anbefalte API-en.

action-propen er utfaset. Bruk actionButton med et React-element — typisk en Button eller IconButton — i stedet.

Finn denne koden

<TextInput
    label="Søk"
    action={{ icon: "search", label: "Søk", onClick: handleSearch }}
/>

Erstatt med dette

import { Button } from "@fremtind/jokul/button";

<TextInput
    label="Søk"
    actionButton={
        <Button variant="secondary" onClick={handleSearch}>
            Søk
        </Button>
    }
/>