designsystem

name

designsystem

description

Ekspert på FHI Designsystem (@folkehelseinstituttet/designsystem, designsystem.fhi.no). Bruk ved installasjon eller oppsett av designsystemet, bruk av FHI-komponenter (fhi-button, fhi-text-input, fhi-checkbox, etc.), bruk av FHI design tokens (farger, typografi, spacing), ikoner, rammeverk-integrasjon (React, Angular, Blazor), eller spørsmål om komponenter brukeren har sett i designsystemets Storybook. Gjelder også når brukeren sier «FHI-komponent» eller bygger skjema/UI i en FHI-app uten å nevne designsystemet eksplisitt.

FHI Designsystem — Brukerveiledning

Bruk FHI Designsystem i egne prosjekter. Designsystemet er basert på standard web components og fungerer i alle rammeverk.

Pakke: @folkehelseinstituttet/designsystem (v0.41.2 — latest) Dokumentasjon: https://designsystem.fhi.no/ GitHub: https://github.com/FHIDev/Fhi.Designsystem Figma: https://www.figma.com/design/VgQG6XeEbFOmHIrxyAOACR/FHI-Designsystem Verifisert mot: @folkehelseinstituttet/designsystem@0.41.2 (2026-07-05) Støttepolicy: Latest + 9 tidligere minor (totalt 10 minor). Se versions/INDEX.md for støttede versjoner.

Versjonsbehandling:

• Sjekk alltid prosjektets package.json for @folkehelseinstituttet/designsystem FØR du svarer. Gi ikke detaljert API-råd før versjon er fastslått. Kun hvis package.json ikke er tilgjengelig → be brukeren oppgi versjon.
• Fast path (latest): Hvis versjonen matcher versjonen i <!-- Basert på ... --> øverst → svar direkte fra dette dokumentet og referansefilene. Ikke les versions/. Unntak: spørsmål som eksplisitt gjelder migrering, eldre versjoner eller støttepolicy — da leses versions/INDEX.md og versions/GUIDE.md uansett.
• Eldre versjon: Les versions/INDEX.md, finn tilhørende delta-fil og les den. Delta-fil overstyrer motstridende informasjon i dette dokumentet.
• Versjon utenfor support window: Best effort, anbefal oppgradering.
• Se versions/GUIDE.md for fullstendig beslutningsflyt og svarformat.

---

Installasjon

npm install @folkehelseinstituttet/designsystem

Theme CSS (påkrevd)

Theme-filen inneholder alle design tokens (farger, typografi, spacing) og fonten Roboto Flex. Den må importeres før komponentene brukes.

// I hovedfilen (main.ts, app.ts, e.l.)
import '@folkehelseinstituttet/designsystem/theme/default.css';

Importere komponenter

Importer hver komponent individuelt:

import '@folkehelseinstituttet/designsystem/fhi-button';
import '@folkehelseinstituttet/designsystem/fhi-text-input';
import '@folkehelseinstituttet/designsystem/fhi-icon-search';

Etter import er komponentene tilgjengelige som HTML-elementer:

<fhi-button>Lagre</fhi-button>
<fhi-text-input label="Navn" name="name"></fhi-text-input>

CDN (kun prototyping — ikke anbefalt for produksjon)

<link rel="stylesheet" href="https://cdn.designsystem.fhi.no/theme/default.css">
<script type="module" src="https://cdn.designsystem.fhi.no/fhi-designsystem.js" crossorigin="anonymous"></script>

CDN laster hele biblioteket. For produksjon, bruk npm for tree-shaking.

For React, Angular eller Blazor, se Rammeverk-oppsett.

---

Kritiske regler

KRITISK: Importer alltid theme/default.css før komponentene brukes. Uten theme-filen mangler alle design tokens, og komponentene rendres uten styling.

KRITISK: Bruk alltid semantiske design tokens i egen CSS. Aldri bruk hardkodede farge- eller størrelsesverdier. Bruk var(--fhi-color-accent-base-default), ikke #2a76c6.

KRITISK: Form-komponenter (fhi-text-input, fhi-checkbox, fhi-radio, fhi-date-input, fhi-select) deltar automatisk i native HTML <form> via ElementInternals. Sett name-attributt for FormData-deltakelse.

VIKTIG: Ikoner importeres som egne komponenter: import '.../fhi-icon-search', ikke som en samlet ikonpakke.

DEPRECATED (v0.31.0): icon-only-attributtet på fhi-button er deprecated — knappen detekterer automatisk om den kun inneholder et ikon. Se fhi-button for anbefalt mønster og versjonsinfo.

---

Komponenter og referanser

Kategori	Komponent	Beskrivelse
Form	fhi-button	Knapp med farger, varianter og størrelser
Form	fhi-text-input	Tekstfelt med label, hjelpetekst, validering og ikon-slots (start/end, fra v0.35.0)
Form	fhi-date-input	Datofelt med kalender (YYYY-MM-DD)
Form	fhi-checkbox	Avkrysningsboks
Form	fhi-radio	Radioknapp (grupper med felles name)
Form	fhi-select	Nedtrekksliste — fra v0.41.0
Form	fhi-select-item	Alternativ i fhi-select
Visuell	fhi-tag	Status-/kategorimerke
Visuell	fhi-tooltip	Tooltip med auto-posisjonering
Visuell	fhi-modal-dialog	Modal dialog
Data	fhi-data-table	Tabell-container (caption, striped) — fra v0.37.0
Data	fhi-data-table-row	Tabellrad (variant header/body)
Data	fhi-data-table-cell	Tabellcelle
Typografi	fhi-display	Display-tekst (stor, fremtredende)
Typografi	fhi-title	Tittel-tekst
Typografi	fhi-headline	Overskrift (h1-h6)
Typografi	fhi-body	Brødtekst
Typografi	fhi-label	Label-tekst
Layout	fhi-flex	Flexbox-container
Layout	fhi-grid	CSS Grid-container
Ikoner	fhi-icon-{navn}	Ikoner basert på Lucide Icons (se ikonlisten)

Øvrige referanser

Dokument	Innhold
Rammeverk-oppsett	React, Angular, Blazor
Form-bruk	FormData, reset, submit
Design tokens	Farger, typografi, spacing, border, motion
Versjonsindeks	Støttede versjoner og nøkkelavvik vs latest
Feature-historikk	Når public features ble innført (fra og med v0.41)
Versjonsguide	Beslutningsflyt og svarformat for versjonsspørsmål

---

Instruksjoner for Claude

1. Versjon: Følg Versjonsbehandling øverst i dokumentet (fast path for latest; delta-fil for eldre versjoner).
2. Komponent: Les referansefilen under references/components/ for den aktuelle komponenten.
3. Forms: Les Form-bruk for FormData-integrasjon.
4. Design tokens: Les Design tokens for riktige token-navn.
5. Ikoner: Les Ikonbruk for import-mønster og tilgjengelige ikoner.

Vedlikehold av denne skillen gjøres med oppdater-designsystem-skillen i dette repoet.