<lm-inline-message> – Innebygd melding / Inline message

Om komponenten

Kanonisk navn

<lm-inline-message>

Synonymer

statuslinje, feilmelding, inline message, status message, helper text

Kategori

tilbakemelding

ARIA-mønster

Alert

Parts

ikon

Native-first-vurdering

Komponenten bruker native tekstinnhold kombinert med ARIA live regions der det trengs, og setter role="alert" (APG Alert-mønsteret) for variant="feil". Det finnes ingen egen HTML- eller Open UI-primitiv for korte inline statusmeldinger.

Nettleserstøtte

Bruker color-mix() for rødtoningen i variant="feil". Uten støtte for color-mix() blir feilvarianten mindre visuelt markert, men teksten vises fortsatt.

Design-tokens

var(--font-size-small, ...), var(--opacity-muted, ...)

Sist endret

20. september 2026

Brukt

6 steder

Formål

Kort status- eller feilmelding i et skjema eller en komponent, f.eks. "Steg 2 av 3" eller "Fant ikke manifest.json". Komponenten samler et tidligere inkonsekvent mønster i én delt primitiv.

Egner seg for

• Korte statuslinjer og feilmeldinger tett på et skjema- eller komponentområde.
• Meldinger som bør annonseres via role="status", role="alert" og aria-live uten at forbrukeren setter dette selv.

Egner seg ikke for

• Store varselbokser med ikon, handlinger eller flere avsnitt; komponenten rendrer bare en enkel tekstslot.
• Meldinger som må kunne lukkes eller ha egen tilstand utover tekst og variant; bruk en rikere komponent som <lm-toast> eller prosjektspesifikk markup.

Bruk

<script type="module" src="/designsystem/komponenter/tilbakemelding/inline-message/inline-message.js"></script>

<lm-inline-message class="status"></lm-inline-message>
<lm-inline-message class="feilmelding" variant="feil" hidden>
    Fant ikke manifest.json for denne presentasjonen.
</lm-inline-message>

document.querySelector(".status").textContent = "Steg 2 av 3";

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Slots

Parts

Styling med ::part()

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

lm-inline-message::part(ikon) {
    /* egne stiler for "Advarsel-ikonet som vises automatisk foran teksten når variant="feil" (skjult for variant="status")." */
}

Tilgjengelighet

Hvis forbrukeren ikke allerede har valgt en egen role, setter komponenten automatisk role="alert" for variant="feil" og ellers role="status" med aria-live="polite". Komponenten har ingen tastaturlogikk, og tomt innhold skjules med :host(:empty). forced-colors: active bruker systemfargen Mark for feilvarianten.

• Hvis forbrukeren ikke allerede har valgt noe annet, setter komponenten role="alert" for variant="feil" og ellers role="status" med aria-live="polite".
• variant="feil" viser automatisk et dekorativt advarsel-ikon (aria-hidden) foran teksten - rent visuelt supplement, teksten alene bærer betydningen for skjermlesere.
• Komponenten har ingen egen tastaturlogikk.
• Tomt innhold skjules automatisk med :host(:empty), så skjermlesere slipper tomme statusområder.
• forced-colors: active bruker systemfargen Mark for feilvarianten. Komponenten animerer ikke.

Detaljer

• Ren visuell primitiv uten egen tilstand utover teksten forbrukeren setter.
• variant="feil" bruker samme rødtonelogikk som tidligere bare fantes ett sted i repoet, men nå delt og konsekvent.
• forced-colors: active bruker Mark i stedet for den vanlige rødtonen.
• Komponenten setter ingen egen margin; forbrukeren styrer avstand som for ethvert annet host-element.

Referanser

Se også:

• ../toast/index.html - Løser samme behov for tilbakemelding når meldingen skal flyte fritt på siden i stedet for å ligge fast i layouten.
• ../../skjema/multistep-form/index.html - Bruker komponenten internt som stegindikator med live-annonsering av aktivt steg.
• ../../innhold/tag/index.html - Er en annen liten tekstlig UI-primitiv, men for klassifisering og statusmerking i stedet for løpende meldinger.

Brukes av:

• designsystem/komponenter/skjema/multistep-form/multistep-form.js - steg-tellerteksten (Steg N av M).
• slides/komponenter/foredragsholder-visning/foredragsholder-visning.js - tilkoblingsstatus og feilmelding.
• slides/komponenter/slide-info/slide-info.js - manifest-feilmelding.
• slides/komponenter/slide-utskrift/slide-utskrift.js - utskrift-status og manifest-feilmelding.
• okonomi/index.html, okonomi/forbruk/index.html, okonomi/lonn/index.html, okonomi/formue/index.html - status-/tomme-liste-meldinger (ingen transaksjoner/lønn/aktiva/gjeld/tilbakemeldinger ennå, konverteringsfeil for valutakurser).
• turer/index.html og turer/trip.html - tomme-liste-meldinger (ingen turer/kvitteringer/hendelser ennå), statistikk-fotnote og status for tidssone-/flightnr.-oppslag.

Avhengigheter: designsystem/komponenter/ikon/ikon/