Field
@/components/ui/Field
Metadata inne i en eksisterende flate: en liten tertiær etikett over en verdi, kort-løs.
Når brukes den
Bruk for et sett med «etikett over verdi»-metadata inne i et kort, en utvidet rad eller en detaljmodal.
Layouten (grid/flex-wrap) eies av kallstedet — Field selv legger ikke på noen kort-chrome.
Bruk valueStyle for å farge en verdi etter status (f.eks. en utløpsdato som nærmer seg).
Ikke bruk til et KPI-tall som skal ha egen kort-chrome — det er StatCard.
Eksempler
Nøkkelverdier i en flate
Flere Field ved siden av hverandre i en flat, delt beholder — layouten er kallstedets ansvar.
Startdato
1. januar 2025
Utløper
14. september 2026
Avtalenummer
AV-2025-0142
Fornyelse
Fornyes automatisk
<Field label="Utløper" valueStyle={{ color: 'var(--color-warning-text)' }}>
14. september 2026
</Field>Props
Sveip tabellen for å se hele innholdet
Navn
Type
Default
Beskrivelse
label *
ReactNode
—
Etiketten over verdien. ReactNode så et lite ikon kan ledsage teksten.
mono
boolean
false
Mono-verdi for avtale-/polisenummer, org.nr o.l.
valueStyle
CSSProperties
—
Overstyrer verdifargen, f.eks. en statusfarge på en utløpsdato.
className
string
—
Ekstra klasser.
children *
ReactNode
—
Selve verdien.