| 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.
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
Øvrige referanser
Instruksjoner for Claude
- Versjon: Følg Versjonsbehandling øverst i dokumentet (fast path for latest; delta-fil for eldre versjoner).
- Komponent: Les referansefilen under
references/components/ for den aktuelle komponenten.
- Forms: Les Form-bruk for FormData-integrasjon.
- Design tokens: Les Design tokens for riktige token-navn.
- Ikoner: Les Ikonbruk for import-mønster og tilgjengelige ikoner.
Vedlikehold av denne skillen gjøres med oppdater-designsystem-skillen i dette repoet.
