Skjemaer

Skjemafelt bruker --radius-small (8px) og --border-width-main (1,5px). Alle felt har fire tilstander: standard, fokus, deaktivert og feil. Feilmeldinger vises i rødt med --error-400 (#c04444). Fokusringen — 3px solid var(--brand-600) — vises ved tastaturnavigasjon (Tab-tast) og oppfyller WCAG AA.

Tekstfelt

Standard
Fokus — vises ved Tab-navigasjon
Deaktivert
Feil Sjekk at e-postadressen er riktig skrevet 
<div class="form-field">
  <label class="form-label" for="id">E-post</label>
  <input class="form-input" type="email" id="id" />
</div>

<!-- Feiltilstand -->
<div class="form-field form-field--error">
  <label class="form-label" for="id">E-post</label>
  <input class="form-input" type="email" id="id"
         aria-invalid="true" aria-describedby="feil-id" />
  <span class="form-error" id="feil-id">Feilmelding her</span>
</div>

Tekstområde

Standard Kan endres i størrelse vertikalt
Feil Fyll inn meldingen din for å sende skjemaet

Nedtrekksliste

Standard
Deaktivert
Feil
Velg en tjeneste for å gå videre 
<div class="form-field">
  <label class="form-label" for="id">Tjeneste</label>
  <div class="form-select-wrapper">
    <select class="form-select" id="id">
      <option value="">Velg…</option>
    </select>
  </div>
</div>

Avmerkingsbokser

Standard
Feil
Velg minst ett alternativ 
<div class="form-field">
  <div class="form-check-list">
    <div class="form-check">
      <input class="form-check__input" type="checkbox" id="id" />
      <label class="form-check__label" for="id">Alternativ</label>
    </div>
  </div>
</div>

<!-- Feiltilstand -->
<div class="form-field form-field--error">
  <div class="form-check-list" aria-describedby="feil-id">
    <div class="form-check">
      <input class="form-check__input" type="checkbox" id="id" aria-invalid="true" />
      <label class="form-check__label" for="id">Alternativ</label>
    </div>
  </div>
  <span class="form-error" id="feil-id">Feilmelding her</span>
</div>

Radioknapper

Standard
Velg budsjett
Feil
Velg budsjett
Velg ett av alternativene for å fortsette 
<fieldset class="form-fieldset">
  <legend class="form-legend">Etikett</legend>
  <div class="form-check-list">
    <div class="form-check">
      <input class="form-check__input" type="radio" id="id" name="gruppe" />
      <label class="form-check__label" for="id">Alternativ</label>
    </div>
  </div>
</fieldset>

Påkrevd og valgfritt

Påkrevd
Valgfritt
Alle felt merket med * er påkrevd 
<!-- Påkrevd felt -->
<div class="form-field">
  <label class="form-label" for="id">
    Navn <span class="form-required" aria-label="påkrevd">*</span>
  </label>
  <input class="form-input" type="text" id="id"
         required aria-required="true" />
</div>

<!-- Valgfritt felt -->
<div class="form-field">
  <label class="form-label" for="id">
    Firma <span class="form-label__optional">(valgfritt)</span>
  </label>
  <input class="form-input" type="text" id="id" />
</div>

Skjemaoppsett

Bruk alltid tokens for avstand mellom felt — ikke hardkodede verdier.

Én kolonne

To kolonner

Plassering Token Verdi Beskrivelse
Mellom felt (vertikal) --space-4 24px Standard avstand mellom skjemafelt
Label → input --space-1 8px Avstand fra label til inputfeltet
Input → hint/feil --space-1 8px Avstand fra inputfeltet til hjelpetekst eller feilmelding
Mellom kolonner (horisontal) --space-4 24px Avstand mellom kolonner i to-kolonne oppsett
Mellom knapper --space-3 16px Avstand mellom handlingsknapper 
<!-- Én kolonne -->
<div style="display: flex; flex-direction: column; gap: var(--space-4);">
  <div class="form-field">...</div>
  <div class="form-field">...</div>
</div>

<!-- To kolonner -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);">
  <div class="form-field">...</div>
  <div class="form-field">...</div>
</div>

Eksempelskjema