<lm-text-field> – Tekstfelt / Text field

Om komponenten

Kanonisk navn: <lm-text-field>
Synonymer: tekstinput, inputfelt, text input, email field, url field
Kategori: skjema
ARIA-mønster: Ikke aktuelt - Wrapper rundt et enkelt native <input>, som allerede er det korrekte, fullstendige mønsteret for et tekstfelt - ikke et eget APG-widgetmønster.
Parts: etikett, etikett-tekst, felt, hjelpetekst, feilmelding
Native-first-vurdering: Bruker et ekte <input> internt for all tekstredigering, autofyll og mobiltastatur-tilpasning. Komponenten legger kun til konsistent etikett-/hjelpetekst-/feilmeldingsoppsett og form-association, slik at forbrukerkode kan skrive feltet som én tag i stedet for <label>+<input>+feilmeldingshåndtering hver gang.
Nettleserstøtte: Ingen spesielle forbehold - ElementInternals/form-associated custom elements støttes i alle moderne evergreen-nettlesere.
Design-tokens: var(--border-color, ...), var(--radius-small, ...), var(--opacity-muted, ...), var(--opacity-disabled, ...), var(--color-feil, ...), var(--font-liten, ...), var(--transition-duration, ...)
Sist endret: 20. september 2026
Brukt: 1 sted

Formål

Ettlinjes tekstfelt med etikett, valgfri hjelpetekst og automatisk feilmeldingsvisning - én komponent for text/email/url/tel/password/search via type-attributtet, i stedet for å håndskrive <label>+<input>+feilmelding-oppsettet i hvert skjema.

Egner seg for

Navn, e-post, URL, telefonnummer, passord og søkefelt - alt som naturlig er én tekstlinje.
Skjemaer som trenger konsistent etikett-/hjelpetekst-/feilmeldingsoppsett uten å skrive egen CSS for det i hvert prosjekt.

Egner seg ikke for

Flerlinjes tekst - bruk <lm-textarea-field>.
Tall som skal valideres/steppes numerisk - bruk <lm-number-field>.
Søk-med-forslag mot en datakilde - bruk et <input list>/<datalist>-par, se kobleDatalistSok().

Bruk

<script type="module" src="/designsystem/komponenter/skjema/text-field/text-field.js"></script>

<form>
    <lm-text-field name="navn" label="Navn" required></lm-text-field>
    <lm-text-field name="epost" type="email" label="E-post" autocomplete="email" help="Brukes kun til kvittering."></lm-text-field>
    <button type="submit">Lagre</button>
</form>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`label`	`string`		Attributt/property. Synlig etikett-tekst - kobles til feltet via et omsluttende `<label>`, ikke `for`/`id`.
`type`	`"text" \| "email" \| "url" \| "tel" \| "password" \| "search"`	"text"	Attributt. Videresendes direkte til det interne `<input type="...">` - gir riktig tastatur på mobil og native format-/URL-/e-postvalidering.
`name`	`string`		Attributt. Skjemafelt-navn - komponenten er form-associated og deltar i FormData under dette navnet.
`value`	`string`	""	Attributt/property. Feltets gjeldende tekstverdi.
`placeholder`	`string`		Attributt. Videresendes til det interne feltet.
`required`	`boolean`	false	Attributt/property. Gjør feltet obligatorisk, legger til en stjerne i etiketten, og fungerer med native `reportValidity()`/`checkValidity()`.
`disabled`	`boolean`	false	Attributt/property. Deaktiverer feltet (arves også automatisk fra en `<fieldset disabled>`).
`readonly`	`boolean`	false	Attributt. Videresendes til det interne feltet.
`pattern`	`string`		Attributt. Videresendes til det interne feltet - regex-mønster for native validering.
`minlength`	`number`		Attributt. Videresendes til det interne feltet.
`maxlength`	`number`		Attributt. Videresendes til det interne feltet.
`autocomplete`	`string`		Attributt. Videresendes til det interne feltet, f.eks. "email"/"tel"/"name".
`help`	`string`		Attributt. Kort hjelpetekst vist under feltet, koblet via `aria-describedby`.

Parts

Part	Beskrivelse
`etikett`	Det omsluttende `<label>`-elementet.
`etikett-tekst`	`<span>`-en med selve etikett-teksten.
`felt`	Det interne `<input>`-elementet.
`hjelpetekst`	`<small>`-elementet med hjelpeteksten.
`feilmelding`	`<small role="alert">`-elementet med valideringsmeldingen.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-text-field::part(etikett) {
    /* egne stiler for "Det omsluttende `<label>`-elementet." */
}

lm-text-field::part(etikett-tekst) {
    /* egne stiler for "`<span>`-en med selve etikett-teksten." */
}

lm-text-field::part(felt) {
    /* egne stiler for "Det interne `<input>`-elementet." */
}

lm-text-field::part(hjelpetekst) {
    /* egne stiler for "`<small>`-elementet med hjelpeteksten." */
}

lm-text-field::part(feilmelding) {
    /* egne stiler for "`<small role="alert">`-elementet med valideringsmeldingen." */
}

Metoder

Metode	Parametre	Returverdi	Beskrivelse
`checkValidity()`	-		Videresender til den interne `ElementInternals.checkValidity()`.
`reportValidity()`	-		Videresender til den interne `ElementInternals.reportValidity()` - viser nettleserens native valideringsboble anker et til feltet.

Tilgjengelighet

Etikett-teksten står i et ekte <label> som omslutter feltet (ingen for/id-kobling å holde synkron). aria-describedby peker alltid på både hjelpetekst- og feilmeldingselementet (tomme elementer annonserer ingenting ekstra). Feilmeldingen får role="alert" og vises først etter at brukeren har forlatt feltet (blur) eller et skjemainnsendingsforsøk har feilet (native invalid-hendelse) - aldri på et urørt, tomt felt.

Etikett-teksten står i et ekte <label> som omslutter feltet.
aria-describedby peker på både hjelpetekst- og feilmeldingselementet.
Feilmeldingen får role="alert" og vises først etter blur eller et feilet innsendingsforsøk.
Obligatoriske felt får en visuell stjerne i tillegg til required-attributtet på det interne feltet.

Detaljer

Er form-associated (static formAssociated = true) og deltar i FormData under sitt name-attributt, helt uten en skjult hjelpe-input.
value-attributtet/-propertyen og alle valideringsattributter (pattern, minlength, maxlength, osv.) videresendes direkte til det interne <input>, slik at native validering (:invalid, checkValidity()) fungerer uendret.

Referanser

Se også:

../textarea-field/index.html - samme etikett-/hjelpetekst-/feilmeldingsoppsett, men for flerlinjes tekst.
../number-field/index.html - samme mønster for numeriske verdier med min/max/step.
../../../guider/skjemafelt/index.html - full oversikt over hvilken feltkomponent som dekker hvilken native input-type.

Brukes av:

Ingen ennå - ny komponent.

Avhengigheter: designsystem/komponenter/skjema/skjema-felt-delt.css, designsystem/komponenter/skjema/skjema-felt-delt.js