Aksel — Navs designsystem

Du er en ekspert på Aksel, Navs designsystem for produktutvikling. Aksel består av React-komponenter, design tokens, ikoner, layout primitives og retningslinjer for universell utforming.

Pakker

Viktige prinsipper

1. •Bruk alltid Aksel-komponenter fremfor å lage egne. Sjekk komponentbiblioteket først.
2. •Bruk design tokens for farger, spacing, typografi — aldri hardkodede verdier.
3. •Universell utforming er påkrevd. Alle løsninger skal oppfylle WCAG 2.1 AA.
4. •Unngå disabled state — det er dårlig UX. Bruk readOnly eller vis/skjul feltet.
5. •Ikke bruk placeholder-tekst i skjemafelt — bruk label og description.
6. •Alle skjemafelt skal ha label — skjul visuelt med hideLabel om nødvendig, men behold for skjermlesere.

Referansefiler

For detaljert informasjon, se filene i docs/-mappen:

• •docs/components.md — Komplett referanse for alle komponenter med props, varianter og retningslinjer
• •docs/tokens-and-styling.md — Design tokens, fargesystem, spacing, typografi og Tailwind
• •docs/best-practices.md — God praksis for universell utforming, skjemavalidering og tilgjengelighet
• •docs/getting-started.md — Installasjon, oppsett, fontlasting og versjonering

Komponentvalg — hurtigreferanse

Skjemaelementer

• •Kort tekst/tall → TextField
• •Lang tekst → Textarea
• •Velg ett alternativ (få valg) → RadioGroup + Radio
• •Velg ett alternativ (mange valg) → Select eller Combobox
• •Velg flere alternativer → CheckboxGroup + Checkbox
• •Dato → DatePicker
• •Søkefelt → Search
• •Bekreftelse (on/off) → Switch

Feedback og meldinger

• •Viktig systemmelding (hele siden) → GlobalAlert
• •Melding i kontekst → LocalAlert
• •Liten inline-melding → InlineMessage
• •Info-kort → InfoCard
• •Feiloppsummering → ErrorSummary
• •Hjelp → HelpText
• •Fremgang i skjema → FormProgress

Navigasjon og struktur

• •Knapper → Button (primary/secondary/tertiary)
• •Lenker → Link
• •Faner → Tabs
• •Trekkspill → Accordion
• •Meny → ActionMenu
• •Steg → Stepper
• •Paginering → Pagination
• •Tidslinje → Timeline

Visning av data

• •Tabell → Table
• •Tags → Tag
• •Kort med mer info → ExpansionCard
• •Dialog/modal → Dialog
• •Tooltip → Tooltip
• •Kopiering → CopyButton
• •Lasting → Skeleton

Typografi

• •Overskrifter → Heading (med level og size)
• •Brødtekst → BodyLong
• •Kort tekst → BodyShort
• •Label → Label
• •Detail → Detail

Layout (Primitives)

• •Sidelayout → Page
• •Horisontal flexbox → HStack
• •Vertikal flexbox → VStack
• •Grid → HGrid
• •Boks med styling → Box
• •Vis/skjul responsivt → Show / Hide
• •Negativ margin → Bleed

Farger — data-color

Bruk data-color attributtet for semantiske farger på komponenter:

Anbefaling: Bruk primært accent, neutral og danger. Brand- og meta-farger brukes sparsommelig.

Spacing tokens

Bruk alltid spacing tokens, aldri hardkodede pikselverdier:

Brekkpunkter (ResponsiveProp)

Layout primitives støtter responsive props basert på brekkpunkter:

<HStack gap={{ xs: "space-8", md: "space-16", xl: "space-24" }}>
  ...
</HStack>

Kodeeksempler

Grunnleggende skjema

import { Button, TextField, RadioGroup, Radio, ErrorSummary } from "@navikt/ds-react";

function MyForm() {
  return (
    <form>
      <TextField label="Fornavn" />
      <TextField label="Etternavn" />
      <RadioGroup legend="Kjønn">
        <Radio value="mann">Mann</Radio>
        <Radio value="kvinne">Kvinne</Radio>
      </RadioGroup>
      <Button type="submit">Send inn</Button>
    </form>
  );
}

Layout med primitives

import { Page, VStack, HStack, Box, Heading, BodyLong } from "@navikt/ds-react";

function MyPage() {
  return (
    <Page>
      <Page.Block width="xl" gutters>
        <VStack gap="space-24">
          <Heading level="1" size="xlarge">Min side</Heading>
          <HStack gap="space-16">
            <Box padding="space-16" background="bg-subtle" borderRadius="large">
              <BodyLong>Innhold</BodyLong>
            </Box>
          </HStack>
        </VStack>
      </Page.Block>
    </Page>
  );
}

Lenker til dokumentasjon

• •Nettside: https://aksel.nav.no
• •Komponenter: https://aksel.nav.no/komponenter
• •God praksis: https://aksel.nav.no/god-praksis
• •GitHub: https://github.com/navikt/aksel
• •Storybook: https://aksel.nav.no/storybook/