Design

FormError

@/components/ui/FormError

Delt feilmelding for skjema/handlinger, utenfor et felt. role="alert" annonserer den for skjermleser straks den dukker opp.

Når brukes den

  • Bruk for en feil som IKKE hører til ett bestemt felt — mislykket lagring, avvist handling.

  • For feil PÅ et felt, bruk error= på Input/Textarea/Select i stedet.

  • variant="boxed" for en feil som skal ta mer plass enn én linje (innlogging, registrering); inline (default) for alt annet.

  • size/as dekker variasjon i eksisterende bruk (12px i et span, o.l.) uten å tvinge en visuell endring.

Eksempler

Inline (standard)

Ren tekst uten bakgrunn/kant — standardformen ved siden av et skjema.

<FormError>Kunne ikke lagre endringen. Prøv igjen.</FormError>

Kompakt (size="label-12", as="span")

For tett inline-bruk der teksten allerede er 12px eller står i et <span>.

Kompakt variant — for tett inline-bruk.

Boxed

Myk rød flate + kant, for en feil som skal ta mer plass enn én linje — f.eks. innlogging/registrering.

Props

Sveip tabellen for å se hele innholdet

Navn
Type
Default
Beskrivelse
children *
ReactNode
—
Feilteksten.
className
string
—
Ekstra klasser.
style
CSSProperties
—
Ekstra inline-stil.
id
string
—
Kobles til feltet via aria-describedby fra kallstedet.
as
'p' | 'span'
'p'
Elementtype.
size
'copy-13' | 'label-12' | 'label-13' | 'label-14'
'copy-13'
Typografistørrelse.
variant
'inline' | 'boxed'
'inline'
'boxed' legger på Callout sin danger-flate + kant rundt teksten.

Regler

regel/farget-smaatekst-bruker-text-token

Beslektede komponenter

callout
input