DsLabel

Etikett for skjemaelementer.

Bruk

Når bør du bruke DsLabel?

• For å merke skjemaelementer slik at brukeren vet hva som forventes i hvert felt.
• I kombinasjon med DsInput, DsSelect og andre skjemakomponenter.
• Når du bygger egendefinerte skjemafelt og trenger en tilgjengelig etikett.

Når bør du unngå DsLabel?

• For overskrifter — bruk DsHeading i stedet.
• For hjelpetekst eller beskrivelser under et felt — bruk DsParagraph eller en dedikert hjelpetekst-komponent.

Eksempler

Grunnleggende bruk

DsLabel — interaktiv forhåndsvisning

Åpne i nytt vindu ↗

DsLabel(text: 'Fornavn')

Med farge, størrelse og vekt

DsLabel(
  text: 'E-postadresse',
  size: DsSize.lg,
  color: DsColor.accent,
  weight: DsFontWeight.semibold,
)

Størrelser

Skriftstørrelsene følger offisiell Designsystemet v1.15.0 (px ved referansestørrelse).

Størrelse	Enum	Størrelse
Liten	DsSize.sm	16px
Medium	DsSize.md	18px
Stor	DsSize.lg	21px

Retningslinjer

• Plasser etiketten visuelt over eller ved siden av det tilhørende skjemafeltet.
• Bruk alltid en etikett for hvert skjemaelement — aldri stol kun på plassholdertekst.
• Hold etiketteksten kort og presis.

Tekst

• Bruk substantiv eller kort frase, f.eks. «Fornavn», «E-postadresse».
• Unngå kolon etter etiketten — designsystemet håndterer visuell separasjon.

Egenskaper

Egenskap	Type	Standard	Beskrivelse
text	String	påkrevd	Etiketteksten.
size	DsSize?	null (effektivt md)	Størrelse på etiketten.
color	DsColor?	null	Fargetema for etiketten.
weight	DsFontWeight?	null (effektivt medium)	Skriftvekt på etiketten (regular/medium/semibold).

Import

import 'package:designsystemet_flutter/typography.dart';

Semantikk

• DsLabel rendrer ren tekst og kobles ikke automatisk til et skjemafelt. For programmatisk kobling må du selv pakke etiketten og feltet i en Semantics-widget, eller bruke en skjemakomponent (f.eks. DsInput/DsField) som håndterer etikettkoblingen.

Tastaturinteraksjon

Tast	Handling
Ingen	DsLabel er ikke direkte interaktiv — fokus flyttes til det tilhørende skjemaelementet.

Fokusindikator

• Ikke relevant — fokus gis til det tilknyttede skjemaelementet, ikke selve etiketten.

Fargekontrast

• Oppfyller WCAG 2.1 AA kontrastkrav.

Har du innspill til denne komponenten? Send innspill på GitHub