nve-combobox

En combobox-komponent lar brukeren velge ett eller flere alternativer fra en liste, eller søke etter alternativer i et tekstfelt. Den støtter både enkelt- og flervalg.

Arvet fra LitElement

Feil / oppgaver / PR

Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-combobox.

 

For å legge til alternativer i select-komponenten bruk options-attributtet. Typen består av:

• value - en unik identifikator som brukes internt til referanser, fokus og ARIA-koblinger.
• label - er teksten som vises i nedtrekksmenyen.
• textLabel - alternativ teksten som vises i inputfeltet.

type Option = {
  value: string;
  label: string;
  textLabel?: string;
};

Typen kan importeres slik:

import type { Option } from 'nve-designsystem/components/nve-combobox/nve-combobox.component.js';

Eksempel på bruk:

 const options: Option[] = [
  {
   value:"ek",
   label: "EK"
  }
 ]

options-attributtet fjernes fra DOM-en etter innlasting, og verdien lagres i en intern tilstand i comboboxen. Dette gjøres for å hindre at DOM-en fylles opp med unødvendig data.

change hendelsen trigges når man velger eller fjerner et alternativ. Hendelsestype kan importers ved:

import type { NveSelectChangeDetail } from 'nve-designsystem/components/nve-combobox/nve-combobox.component.js';

Den returnerer:

type NveSelectChangeDetail<T> = {
  value: string;
  action: 'select' | 'deselect';
}

Eksempler

Enkeltvalg

Det er en combobox standard.

Tastaturnavigasjon i combobox

• Pil ned – Åpner listeboksen hvis den er lukket, uten å flytte fokus ut av feltet. Setter visuell fokus på første element eller sist fokusert element.
• Pil opp – Åpner listeboksen hvis den er lukket, uten å flytte fokus ut av feltet. Setter visuell fokus på siste element eller sist fokusert element.
• Escape – Lukker listeboksen hvis den er åpen. Beholder gjeldende verdi i feltet.
• Enter / Mellomrom – Hvis listeboksen er lukket, åpner den. Hvis et alternativ er aktivt, velger (eller fjerner) det aktive alternativet og lukker listen.
• Skrivbare tegn – Åpner listeboksen (hvis lukket) og flytter visuell fokus til første alternativ som matcher det du skriver. Skriver du flere tegn raskt etter hverandre, søker den på hele teksten. Skriver du samme tegn flere ganger, hopper den mellom alternativer som starter med dette tegnet.
• Home – Åpner listeboksen og flytter visuell fokus til første alternativ.
• End – Åpner listeboksen og flytter visuell fokus til siste alternativ.
• Tab – Lukker listeboksen og flytter fokus videre til neste fokusbare element i skjemaet.

<nve-combobox
  id="nve-avdeling-1"
  label="Velg en avdeling"
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Enkeltvalg og redigerbar input

For a vise en enkeltvalg med redigerbar input bruk editable

Tastaturnavigasjon i combobox

Samme som i enkeltvalg, bortsett fra hvordan skrivbare tegn håndteres.

Skrivbare tegn vises med én gang i input-feltet, og brukes til å filtrere listen slik at kun alternativer som inneholder skrevet tekst vises. I tillegg når man valgte en verdi og så trykker pa pilen ned, skal visuelt teksten forsvinne slik at hele listen vises igjen. Klikker man tab eller esc skal valgte verdi vises i tekst feltet igjen.

<nve-combobox
  id="nve-avdeling-1"
  label="Velg en avdeling"
  editable
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Flervalg

Bruk multiple for å kunne velge flere alternativer. Valgte alternativer vises i combobox‑feltet som tags (implementert som button‑elementer).

aria-label på tag-knappen er som standard «Slett» + ledeteksten til alternativet som fjernes. Du kan kun overskrive den første delen av teksten (for eksempel «Fjern» i stedet for «Slett»). Selve ledeteksten for alternativet leses alltid opp til slutt. Velg derfor ord som gir mening i sammenheng, og vurder å overskrive teksten dersom du bruker et annet språk enn norsk.

Når du klikker på en tag, fjernes det tilhørende alternativet fra de valgte verdiene. Det samme kan gjøres med tastatur når fokus er i combobox‑feltet ved å bruke Backspace. Du kan også bruke venstre og høyre piltast for å navigere mellom tags og fjerne dem med enten Backspace eller Enter.

Tastaturnavigasjon i combobox

• Pil ned – Åpner listeboksen hvis den er lukket, uten å flytte fokus ut av feltet. Setter visuell fokus på første element eller sist fokusert element.
• Pil opp – Åpner listeboksen hvis den er lukket, uten å flytte fokus ut av feltet. Setter visuell fokus på siste element eller sist fokusert element.
• Pil venstre – Når listeboksen er åpen og det finnes valgte tags, lukkes listeboksen og fokus flyttes til den siste tag‑knappen i comboboxen. Hvert nye trykk på pil venstre flytter fokus til forrige tag.
• Pil høyre – Når fokus står på en tag, flytter pil høyre fokus til neste tag. Hvis fokus står på den siste tag‑knappen, flyttes fokus tilbake til input‑feltet.
• Escape – Lukker listeboksen hvis den er åpen. Beholder gjeldende verdi i feltet.
• Enter / Mellomrom – Hvis listeboksen er lukket, åpner den. Hvis et alternativ er aktivt, velger (eller fjerner) det aktive alternativet. Tag med valgte verdi i comboboxen vises. Hvis klikket på tag-knappen, slettes den.
• Backspace – Når den trykkes mens fokus står i listen, lukkes listeboksen og fokus flyttes til den siste valgte tag‑knappen. Neste trykk på Backspace sletter taggen og flytter fokus på den neste siste taggen.
• Skrivbare tegn – Åpner listeboksen (hvis lukket) og flytter visuell fokus til første alternativ som matcher det du skriver. Skriver du flere tegn raskt etter hverandre, søker den på hele teksten. Skriver du samme tegn flere ganger, hopper den mellom alternativer som starter med dette tegnet.
• Home – Åpner listeboksen og flytter visuell fokus til første alternativ.
• End – Åpner listeboksen og flytter visuell fokus til siste alternativ.
• Tab – Lukker listeboksen og flytter fokus videre til neste fokusbare element i skjemaet.

<nve-combobox
  id="nve-avdeling-3"
  label="Velg en avdeling"
  multiple
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Flervalg og redigerbar input

Akkurat som i enkeltvalg comboboxen kan man skrive inn i input feltet nar man bruker editable-attributtet. Input felt vises etter taggene.

<nve-combobox
  id="nve-avdeling-4"
  label="Velg en avdeling"
  multiple
  editable
  options='[
    { "value":"rme","label": "RME-test with very long titles" },
    { "value":"ek","label": "EK-test with very long titles" },
    { "value":"tb","label": "TB-test with very long titles" },
    { "value":"h","label": "H-test with very long titles" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Ledetekst

Bruk label for å vise en tydelig ledetekst for feltet. Attributtet er påkrevd – hvert skjemafelt skal ha en ledetekst som skjermlesere kan bruke for å forstå hva feltet gjelder.

Med web components er det foreløpig ikke mulig å koble en ekstern ledetekst (som ikke eksiterer i samme Shadow root som komponent du skal koble den med) i nve-combobox slik at den gir mening fra tilgjengelighets perspektiv. Bruk gjerne label property i stedet.

<nve-combobox
  id="nve-avdeling-22"
  label="Velg en avdeling"
  editable
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Toggletip

Bruk sporet label-toggletip for å vise en toggletip ved siden av ledeteksten. Sporet er beregnet for en nve-toggletip-komponent.

Husk å legge til aria-label på nve-toggletip.

<nve-combobox
  id="nve-avdeling-22"
  label="Velg en avdeling"
  editable
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
  <nve-toggletip slot="label-toggletip" aria-label="Les mer om avdelinger">
    <span>Ekstra info her.</span>
  </nve-toggletip>
</nve-combobox>

Alternativ tekst i inputfeltet

Bruk textLabel i options-arrayet for å vise en annen ledetekst i inputfeltet enn den som vises i listen (neddtrekksmenyen).

textLabel bør ha tydelig sammenheng med label i listen. Du kan gjerne bruke en kortere variant i inputfeltet (f.eks. «RME»), men behold samme mening som i nedtrekksmenyen (f.eks. «RME (NVE)»), slik at brukere (inkl. skjermleserbrukere) forstår at det er samme alternativ.

<nve-combobox
  id="nve-avdeling-22"
  label="Velg en avdeling"
  tooltip="Velg avdeling"
  editable
  options='[
    { "value":"rme","label": "RME (NVE)", "textLabel": "RME"  },
    { "value":"ek","label": "EK (NVE)", "textLabel": "EK" },
    { "value":"tb","label": "TB (NVE)", "textLabel": "TB" }
     ]'
>
</nve-combobox>

Endre list høyden

Som standard har listen en maksimal høyde på 220px. Dette kan justeres ved behov ved å bruke CSS‑variabelen --listbox-max-height på nve-combobox.

Fjern alle knapp

Bruk clearable for å vise en knapp i combobox‑feltet som fjerner alle valgte verdier (vises etter man har valgt minst en verdi). Et klikk på fjern-knappen sender også en change-hendelse med et tomt array av verdier.

Fjern‑knappen er ikke fokuserbar med tastatur. Dette er et bevisst valg: i enkeltvalg‑varianten skal det ikke være egne knapper inne i feltet. I flervalg kan brukeren navigere mellom tags med piltaster, men det er ikke forventet at fjern‑knappen skal ha eget tastaturfokus i enkeltvalg.

<nve-combobox
  id="nve-avdeling-5"
  label="Velg en avdeling"
  clearable
  multiple
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Størrelse

Bruk size for å endre størrelsen på combobox‑feltet. Verdien kan være:

• large
• medium (standard)
• small

<nve-combobox
  id="nve-avdeling-6"
  size="large"
  label="Velg en avdeling fra stor combobox"
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

<nve-combobox
  id="nve-avdeling-7"
  label="Velg en avdeling fra medium combobox"
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

<nve-combobox
  id="nve-avdeling-8"
  size="small"
  label="Velg en avdeling fra liten combobox"
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Mørk bakgrunn

Bruk filled for mørk bakgrunnsfarge

<nve-combobox
  id="nve-avdeling-9"
  label="Velg en avdeling"
  filled
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Hjelptekst

Bruk helpText for å vise hjelpetekst over combobox.

<nve-combobox
  id="nve-avdeling-10"
  label="Velg en avdeling"
  helpText="Avdeling velges for å sendes i skjema"
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Hint-tekst

Bruk hint for å vise hint-tekst under combobox.

<nve-combobox
  id="nve-avdeling-10"
  label="Velg en avdeling"
  hint="Avdeling velges for å sendes i skjema"
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Deaktivert

Bruk attributtet disabled for å hindre muligheten for å endre verdier.

<nve-combobox id="nve-avdeling-11" label="Velg en avdeling" disabled options='[{ "value":"rme","label": "RME" }]'>
</nve-combobox>

Skrivebeskyttet

Bruk readonly for å stenge mulighet for å endre innholdet.

<nve-combobox id="nve-avdeling-12" label="Velg en avdeling" readonly options='[{ "value":"rme","label": "RME" }]'>
</nve-combobox>

Placeholder

Bruk placeholder for å vise en hjelpetekst i feltet når ingen verdi er valgt. Placeholder‑teksten er kun et visuelt hint til brukeren og blir erstattet så snart brukeren har gjort et valg.

<nve-combobox
  id="nve-avdeling-13"
  label="Velg en avdeling"
  placeholder="Velg"
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Påkrevd

Bruk required for å vise et stjernesymbol på slutten av ledeteksten som markerer at feltet er påkrevd.
Bruk i tillegg requiredLabel for å vise en forklarende tekst sammen med stjernen (for eksempel 'obligatorisk'). Dette gir brukerne en bedre forståelse av at feltet er påkrevd, siden ikke alle brukere forstår eller oppfatter stjernesymbolet alene.

<nve-combobox
  id="nve-avdeling-14"
  label="Velg en avdeling"
  required
  requiredLabel="Obligatorisk"
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Begrense antall valgbare verdier

Med flervalg kan du også begrense hvor mange verdier som kan velges ved å bruke max. Når grensen er nådd, blir reste av alternativene utilgjengelige (aria-disabled).

Bruk helpText til å informere brukeren om at det kun kan velges et begrenset antall alternativer (for eksempel «Du kan velge maks 2 alternativer»). Da unngår du at brukeren blir forvirret når valg plutselig blir deaktivert.

<nve-combobox
  id="nve-avdeling-15"
  label="Velg en avdeling"
  multiple
  max="2"
  helpText="Du kan velge maks 2 alternativer."
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Forhåndsvalgte verdier

Bruk et selectedIds string array for å vise forhandsvalgte verdier. Hvis du skal bruke enkeltvalg skal kun en verdi i arrayet sendes. Om id-er i arrayet stemmer ikke med alternativ sine id-er skal de ikke vises.

selectedIds-attributtet fjernes fra DOM-en etter innlasting, og verdien lagres i en intern tilstand i comboboxen. Dette gjøres for å hindre at DOM-en fylles opp med unødvendig data.

<nve-combobox
  id="nve-avdeling-16"
  label="Velg en avdeling"
  multiple
  selectedIds='["rme", "tb"]'
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

<nve-combobox
  id="nve-avdeling-17"
  label="Velg en avdeling"
  selectedIds='["rme"]'
  options='[ 
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" },
    { "value":"tb","label": "TB" },
    { "value":"h","label": "H" },
    { "value":"ikti","label": "IKTI" },
    { "value":"sv","label": "SV" },
    { "value":"v","label": "V" }
     ]'
>
</nve-combobox>

Validering

For mer informasjon om hvordan nve-combobox og andre skjemakomponenter valideres, se siden om validering.

Intern validering

Intern validering gjør det mulig å validere verdien i nve-combobox ved hjelp av valideringsregler.

Verdien er en tabell med de valgte verdiene.

Valideringsreglene kjøres når du kaller validateForm() i skjemaets submit-handler.

Du kan importere metoden slik:

import { validateForm } from 'nve-designsystem/validation/validateForm.js';

<form id="test-form" class="form">
  <nve-combobox
    id="cb"
    label="Velg en avdeling"
    selectedIds='["rme"]'
    options='[
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" }
    ]'
  >
  </nve-combobox>

  <nve-button type="submit">Send inn</nve-button>
</form>

<script type="module">
  const form = document.querySelector('#test-form');
  const cb = document.querySelector('#cb');

  cb.validationRules = [(value) => value.length > 0 || 'Feltet er påkrevd'];

  form?.addEventListener('submit', (event) => {
    event.preventDefault();
    validateForm(event);
  });
</script>

Ekstern validering

Bruker du et eksternt valideringssystem, kan du sette komponenten i feiltilstand ved hjelp av errorMessage.

<form>
  <nve-combobox
    id="cb"
    label="Velg en avdeling"
    options='[
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" }
    ]'
    errorMessage="Feltet er påkrevd"
  ></nve-combobox>
</form>

Du kan fjerne feiltilstanden ved å sette errorMessage til en tom streng.

<form>
  <nve-combobox
    id="cb"
    label="Velg en avdeling"
    options='[
    { "value":"rme","label": "RME" },
    { "value":"ek","label": "EK" }
    ]'
    errorMessage=""
  ></nve-combobox>
</form>

Tilgjengelighet

Denne combobox-komponenten følger WAI-ARIA-mønstrene for combobox og listbox, slik de er definert av W3C.

Fokusstyring og aria-activedescendant

Når brukeren navigerer mellom valg i popupen (listbox), forblir DOM-fokus på inputfeltet i comboboxen. I stedet for å flytte DOM-fokus, bruker komponenten aria-activedescendant (les mer her) til å referere til det aktive elementet.

Dette innebærer:

• Comboboxen beholder DOM-fokus til enhver tid
• Hjelpeteknologier oppfatter fokusflyt i listen via aria-activedescendant
• Verdien til aria-activedescendant peker alltid til ID-en til det aktive elementet

Siden aria-activedescendant er avhengig av ID-referanser, må alle interaktive valg være i samme shadow root som comboboxen (derfor brukes options-attributtet i stedet for en dedikert option-komponent). Dette sikrer at relasjoner basert på ID fungerer korrekt for hjelpeteknologier.

Flervalg

For comboboxer med flervalg:

• Når comboboxen får fokus første gang, blir alle valgte verdier lest opp via aria-describedby
• Valgte verdier rendres i en visuelt skjult container (bruker sr-only css-klassen) som inneholder ledetekstene til de valgte elementene
• Dette gjør at skjermlesere kan lese opp valgte verdier når inputfeltet får fokus

Dette er nødvendig fordi:

• Valgte “tags” ikke er fokuserbare
• Inputfeltet er det primære fokuserbare elementet
• Uten dette ville skjermlesere ikke lese opp tidligere valgte verdier

Dette er en midlertidig løsning. Med støtte for internasjonalisering (i18n) vil dette erstattes med enklere meldinger, som for eksempel: "3 elementer valgt".

Fjerne alle-knapp

Comboboxen kan inneholde en clear-knapp plassert etter inputfeltet, som lar brukeren fjerne alle valgte verdier.

Knappen er ikke tilgjengelig via piltaster eller intern tastaturnavigasjon i comboboxen.

Dette er et bevisst valg fordi:

• DOM-fokus holdes på inputfeltet for å sikre korrekt oppførsel med aria-activedescendant. Flytting av fokus bort fra inputfeltet vil bryte med comboboxens fokusmodell.
• Å inkludere knappen i piltastnavigasjon ville bryte med forventet navigasjonsmønster og kunne skape forvirring (siden den er plassert etter input feltet ulik taggene med valge verdier).

Brukere kan fortsatt tømme input manuelt med tastatur (f.eks. Backspace/Delete) eller med mus.

Dette vurderes som en akseptabel avveining, ettersom funksjonaliteten fortsatt er tilgjengelig via tastatur, selv om den ikke er eksponert som en egen fokusbar kontroll.

Feilhåndtering

Feilmeldinger annonseres ikke med aria-live.

Dette er bevisst fordi:

• Feil oppstår vanligvis ved blur eller innsending av skjema
• I begge tilfeller flyttes fokus bort fra comboboxen
• Feilmeldingen vil da bli lest naturlig i dokumentets leserekkefølge

Når errorMessage er satt, får inputfeltet i nve-combobox attributtet aria-invalid.

Begrensning av maks antall valg

Når et definert maksantall valg er nådd i en combobox med flervalg, blir alle øvrige valg utilgjengelige.

Dette gjøres ved å sette aria-disabled="true" på alle valg som ikke allerede er valgt.

Brukere kan fortsatt navigere mellom alle valg i listen. Valg som er deaktivert blir annonsert som utilgjengelige av skjermlesere.

Navigasjon i listen

Navigering i listen oppdaterer ikke verdien i inputfeltet.

Dette gjør det mulig for skjermleserbrukere å utforske tilgjengelige valg uten å miste gjeldende verdi.

Gjeldende verdi beholdes når listen lukkes med Escape eller når brukeren lukker listen ved å interagere med inputfeltet

Hendelser

Navn	Arvet fra	Beskrivelse
change		Når et alternativ velges eller fjernes. Hendelsen inkluderer verdien til det endret alternativet og handlingen som ble utført (select eller deselect).
nve-show		Når listeboksen åpnes
nve-hide		Når listeboksen lukkes
nve-clear		Når alle valgte alternativer fjernes ved å klikke på clearable-knappen

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
testId	string | undefined = undefined
disabled	= false		Om feltet skal være deaktivert
form	string		Form-id som feltet tilhører
id	= ''		Unik id
multiple	= false		Om komponenten tillater flere valg
name	string		Navn på feltet
required	= false		Om feltet er obligatorisk
clearable	= false		Om alle valgte alternativer kan fjernes
errorMessage	= ''		Feilmelding som vises ved valideringsfeil. Hvis den er satt blir felt ugyldig og feil melding vises.
filled	= false		Om feltet skal bruke filled variant
helpText	= ''		Hjelpetekst som vises over feltet
hint	= ''		Hint-tekst som vises under feltet
label	string = ''		Ledetekst
max	number		Tekst som vises for å markere at et felt er obligatorisk
options	Option[] = []		Alternativer som kan velges i select-komponenten. Hver option har en verdi og en label som vises i UI.
placeholder	= ''		Placeholder-tekst for inputfeltet
readonly	= false		Om feltet skal være skrivebeskyttet
removeTagAriaLabel	= 'Slett'		Aria-label for knappen som fjerner et valgt alternativ i multiselect
requiredLabel	= ''		Tekst som vises for å markere at et felt er obligatorisk
editable	= false		Om bruker kan redigere verdien i inputfeltet
selectedValues	string[] = []		Initialt valgte verdier
size	'small' | 'medium' | 'large' = 'medium'		Størrelse på komponenten
tooltip	= ''		Tooltip-tekst for label
wrap	= false		Om tags skal brytes til neste linje hvis de ikke får plass. Standard er false og da indikatoren vises.
validationRules	Array<ValidationRule> = []

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
focus				Setter fokus på inputfeltet i combobox
validate

Deler

Navn	Beskrivelse
field	Ytre container for hele feltet (label, combobox og hjelpetekst)
combobox	Wrapper rundt kontrollen (verdiområde og listboks)
control	Selve kontrollen som inneholder verdi, input, tags og ikoner
value	Område som inneholder valgte tags og input-feltet
input	Det interaktive input-feltet som fungerer som combobox-kontroll
tag	Tag/knapp som representerer et valgt alternativ i multiselect
clear-button	Knapp for å fjerne alle valgte alternativer
listbox	Containeren som viser listen over tilgjengelige alternativer
option	Enkelt alternativ i listen
help-text	Område for hjelpetekst og feilmeldinger under feltet
hint-text	Område for hint-tekst eller feilmelding under feltet
error-text	Område for feilmelding under feltet