DsSelect

Velger med nedtrekksliste.

Bruk

Når bør du bruke DsSelect?

• Når brukeren skal velge ett alternativ fra en forhåndsdefinert liste.
• Når listen inneholder mer enn 5 alternativer, slik at radioknapper ville ta for mye plass.
• I skjemaer der valg blant standardiserte verdier er nødvendig (f.eks. fylke, land).

Når bør du unngå DsSelect?

• Når det er færre enn 4 alternativer. Bruk radioknapper i stedet for bedre oversikt.
• Når brukeren skal kunne skrive inn egne verdier. Bruk et tekstfelt med autofullfør i stedet.

Eksempler

Grunnleggende bruk

DsSelect — interaktiv forhåndsvisning

Åpne i nytt vindu ↗

DsSelect(
  items: ['Oslo', 'Vestland', 'Trøndelag'],
  selectedIndex: valgtIndeks,
  placeholder: 'Velg fylke',
  onChanged: (indeks) => setState(() => valgtIndeks = indeks),
)

Med feilmelding

DsSelect(
  items: ['Administrator', 'Bruker', 'Gjest'],
  selectedIndex: null,
  placeholder: 'Velg rolle',
  error: 'Du må velge en rolle.',
  onChanged: (indeks) => setState(() => valgtRolle = indeks),
)

Retningslinjer

• Bruk alltid en ledetekst (label) for å forklare hva brukeren skal velge.
• Sorter alternativene i en logisk rekkefølge (f.eks. alfabetisk eller etter relevans).
• Vis en tydelig feilmelding under velgeren når valideringen feiler.

Tekst

• Ledeteksten bør være kort og beskrivende (f.eks. «Velg fylke»).
• Alternativtekstene bør være fullstendige og entydige.

Egenskaper

Egenskap	Type	Standard	Beskrivelse
items	List<String>	påkrevd	Valgalternativene i listen
selectedIndex	int?	null	Indeks for valgt alternativ
onChanged	ValueChanged<int>?	null	Kalles med indeks når valgt verdi endres
placeholder	String?	null	Plassholdertekst når ingen verdi er valgt
size	DsSize?	null	Størrelse på velgeren
color	DsColor?	null	Fargetema
error	String?	null	Feilmelding som vises under velgeren
disabled	bool	false	Om velgeren er deaktivert (dimmet)
readOnly	bool	false	Om velgeren er skrivebeskyttet (synlig men ikke redigerbar)

Import

import 'package:designsystemet_flutter/components.dart';

Semantikk

• Har combobox-semantikk slik at skjermlesere forstår komponentens rolle.
• Ledeteksten er programmatisk knyttet til velgeren.
• Feilmeldinger annonseres til skjermlesere.

Tastaturinteraksjon

Tast	Handling
Tab	Flytter fokus til velgeren.
Enter / Mellomrom	Åpner nedtrekkslisten.
Pil ned	Flytter fokus til neste alternativ i listen.
Pil opp	Flytter fokus til forrige alternativ i listen.
Enter	Velger det fokuserte alternativet og lukker listen.
Escape	Lukker nedtrekkslisten uten å endre valg.

Fokusindikator

• Synlig fokusindikator ved tastaturnavigasjon.

Fargekontrast

• Oppfyller WCAG 2.1 AA kontrastkrav.

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