designsystem

<!-- Basert på @folkehelseinstituttet/designsystem v0.41.2 -->

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.