Combobox

Release dato: 09.04.2024

Sist oppdatert: 19.06.2025

En combobox (multiselect, flervalg) kombinerer et tekstfelt med en nedtrekksliste. Den lar brukeren:

  • SĂžke ved Ă„ skrive inn tekst (for Ă„ filtrere alternativer)
  • Velge ett eller flere alternativer fra en forhĂ„ndsdefinert liste
  • Legge til egne verdier dersom det er tillatt (valgfritt)

FormÄlet med en combobox er Ä gjÞre det enklere for brukeren Ä finne eller legge inn riktig verdi, spesielt nÄr det er mange alternativer.

Test komponenten

Relaterte komponenter

Varianter

Comboboxen kan brukes i to forskjellige typer:

Type Bruk
Enkeltvalg Brukeren kan velge kun ett alternativ
Flervalg Brukeren kan velge flere alternativer
Eksempel pÄ enkeltvalg comboboxEksempel flervalg combobox

NĂ„r du bruker flervalg, blir valgene registrert som tags. Tagsene kan plasseres inne i, eller utenfor, feltet.

Eksempel pÄ combobox.Eksempel combobox med valgte verdier som tags utenfor feltet

StĂžrrelser

Comboboxen kan brukes i tre ulike stĂžrrelser:

StĂžrrelser Bruk
Medium (default) Standard, og skal brukes som hovedregel
Small For trange flater, som tabeller og kompakte skjema
XSmall For ekstra trange flater, som kompakte tabeller og informasjonstette fagsystemer
Eksempel pÄ combobox i forskjellige stÞrrelser

Retningslinjer for bruk

Bruk combobox nÄr

  • brukeren har mange valg og kan velge flere enn Ă©n
  • du Ăžnsker at brukeren skal kunne sĂžke eller filtrere
  • brukeren skal kunne skrive inn fritekst

UnngÄ combobox nÄr

  • det er fĂŠrre enn 3 alternativer Ă„ velge mellom (bruk heller checkbox eller radiobutton)
  • det er viktig at brukeren bare velger fra en fast liste
  • kun sĂžk er nĂždvendig (bruk heller search input)

Skriv tydelig label og hjelpetekst

SÞrg for at label (etiketten) til comboboxen er beskrivende og gir brukeren en tydelig forstÄelse om hva som trengs av input. Bruk bÄde label og hjelpetekst for Ä forklare regler som for eksempel maks antall valg eller fritekst.

GjĂžr slik

Skriv tydelige og klare etiketter og hjelpetekster.

UnngÄ

UnngÄ ufullstendig og uklar etikett og hjelpetekst.

Beskriv mulighetene til brukeren Dersom du gir brukeren mulighet for Ă„ legge

til nye alternativer, forklar tydelig hvordan brukeren skal benytte comboboxen i hjelpeteksten.

Eksempel pÄ combobox med inputfelt med et plusstegn, der brukeren kan legge til nye alternativer.Eksempel combobox uten mulighet for Ä legge til nye alternativer.

Responsivitet

Combobox fungere godt pÄ alle skjermstÞrrelser, inkludert mobil og nettbrett. Den tilpasser seg tilgjengelig plass, og bÄde inputfelt og liste over alternativer bryter linjer der det er nÞdvendig.

Det er noen ting vi anbefaler at dere tester og vurderer nÄr dere bruker combobox:

  • Pass pĂ„ at tags (i flervalg) ikke bygger for mange linjer eller blir visuelt overveldende. PĂ„ smale skjermer bĂžr lange verdier trunkeres, brytes eller skjules pĂ„ en ryddig mĂ„te.
  • UnngĂ„ at valgoversikten dekker for mye av skjermen. Du kan vurdere Ă„ bruke fullskjermsvisning av listen pĂ„ smĂ„ skjermer dersom det er mange valg.
  • Comboboxen fungerer like godt i bĂ„de stĂ„ende og liggende visning. Likevel anbefaler vi at dere tester bĂ„de pĂ„ mobil og nettbrett.
Combobox pÄ mobil

Universell utforming

Skjemaelementer skal ha en-kolonnes layout og synlig struktur

Skjemaelementer burde ha en en-kolonnes layout, og hvert element skal ha sin egen label for Ă„ beskrive bruk. Om label av en eller annen grunn ikke skal vises skal den fortsatt finnes, men bruke klassen pkt-sr-only slik at skjemaet fortsatt er brukervennlig.

Alle felt mÄ ha logisk label

Alle tekstfelt skal ha et tilknyttet label (ledetekst/etikett). Label bĂžr vĂŠre koblet til tekstfeltet i koden slik at skjermlesere kan lese opp riktig informasjon. Komplekse skjema kan kreve mer hjelp enn bare labels.

Feilmeldinger skal vĂŠre synlige og tydelige

Feilmeldinger bÞr vÊre kodet som tekst og identifisere det spesifikke skjemaelementet hvor feilen oppstod. Feilmeldingen mÄ beskrive feilen og vÊre synlig uten at brukeren gjÞr noen ekstra handlinger.

Les mer om universell utforming av combobox:

Anatomi

Element Beskrivelse
1. Label Tittel/etikett over feltet (valgfritt)
2. Hjelpetekst Forklaring under feltet (valgfritt)
3. Inputfelt Skrivefelt med autocomplete og visning av valg
4. Tags Valgte alternativer i flervalg
5. Alternativer Liste over valg som kan sĂžkes og velges fra
6. Valg alternativ Valgt alternativ fÄr aktiv checkbox og vises som tag
7. Hover Visuell tilbakemelding ved hover og valgt tilstand
Combobox anatomi.

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig fĂžr du tester den. Dette kan gjĂžres ved Ă„ kjĂžre denne kodelinjen fĂžr testene kjĂžres: 

await window.customElements.whenDefined("pkt-combobox");

Egenskaper

PktCombobox

Props

Prop:
name?
Type:
string
Beskrivelse:
Navn som brukes i skjema ved innsending
Prop:
id?
Type:
string
Beskrivelse:
Unik ID for feltet
Prop:
label?
Type:
string
Beskrivelse:
Tekst som vises over feltet
Prop:
placeholder?
Type:
string
Beskrivelse:
Spesifiserer en kort hint som beskriver forventet verdi av feltet.
Prop:
multiple?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Mulighet for Ă„ velge flere valg
Prop:
tagPlacement?
tag-placement?
Type:
"inside" | "outside"
Beskrivelse:
Plassering av valgte verdier i feltet ved flervalg
Prop:
maxlength?
Type:
number
Beskrivelse:
Maks antall valg dersom flervalg er aktivert
Prop:
typeahead?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Mulighet for automatisk utfylling av feltet fra listen over valg
Prop:
includeSearch?
include-search?
Type:
boolean
Beskrivelse:
Mulighet for Ă„ sĂžke etter valg inni dropdown
Prop:
allowUserInput?
allow-user-input?
Type:
boolean
Beskrivelse:
Mulighet for Ă„ skrive inn egne verdier
Prop:
searchPlaceholder?
search-placeholder?
Type:
string
Beskrivelse:
Plassholdertekst for sĂžkefeltet i dropdown
Prop:
displayValueAs?
display-value-as?
Type:
"label" | "value" | "prefixAndValue"
Standardverdi:
"label"
Beskrivelse:
Hvordan valgt verdi vises i feltet
Prop:
inputSize?
input-size?
Type:
"small" | "medium" | "xsmall"
Standardverdi:
"medium"
Beskrivelse:
Visuell stĂžrrelse via input-wrapper. small: kompakt wrapper og felt (42px). xsmall: samme wrapper som small, felt 36px.
Prop:
value?
Type:
string
Beskrivelse:
Valgt verdi. Streng ved enkelt valg, array av strenger ved flervalg.
Prop:
helptext?
Type:
string
Beskrivelse:
Hjelpetekst som vises over feltet
Prop:
helptextDropdown?
Type:
string
Beskrivelse:
Hjelpetekst som vises i en lukket boks man kan Ă„pne
Prop:
helptextDropdownButton?
Type:
string
Standardverdi:
"Les mer"
Beskrivelse:
Tekst som vises pÄ knappen for Ä Äpne/lukke utvidet hjelpetekst
Prop:
disabled?
Type:
boolean
Beskrivelse:
Feltet er deaktivert
Prop:
hasError?
Type:
boolean
Beskrivelse:
Feltet har en feil
Prop:
errorMessage?
Type:
string
Beskrivelse:
Tekst som vises under feltet ved feil
Prop:
required?
Type:
boolean
Beskrivelse:
Feltet mÄ fylles ut
Prop:
requiredTag?
Type:
boolean
Beskrivelse:
Viser en merking som indikerer at feltet er pÄkrevd
Prop:
requiredText?
Type:
string
Beskrivelse:
Tekst som vises i pÄkrevd-merkingen
Prop:
optionalTag?
Type:
boolean
Beskrivelse:
Viser en merking som indikerer at feltet er valgfritt
Prop:
optionalText?
Type:
string
Beskrivelse:
Tekst som vises i valgfritt-merkingen
Prop:
tagText?
Type:
string
Beskrivelse:
Tekst som vises i en tag ved siden av label
Prop:
fullwidth?
Type:
boolean
Beskrivelse:
Skal feltet ta opp hele bredden?
Prop:
defaultOptions?
default-options?
Type:
array
Standardverdi:
[]
Beskrivelse:
Liste over valg som kan velges, om options sendes inn som array med objekter (denne vil ikke modifiseres ved endring innad i komponenten)
Prop:
options?
Type:
array
Standardverdi:
[]
Beskrivelse:
Liste over valg som kan velges, om options sendes inn som array med objekter

Events

Event:
change
Type:
Event
Beskrivelse:
Returnerer valgt verdi som streng. Ved flervalg returneres kommaseparerte verdier.
Event:
value-change
Type:
CustomEvent
Beskrivelse:
Returnerer valgt verdi. Ved enkeltvalg en streng, ved flervalg en string[].
Event:
search
Type:
CustomEvent
Beskrivelse:
Returnerer sÞketeksten som streng i event.detail nÄr brukeren skriver i sÞkefeltet
Event:
toggleHelpText
Type:
CustomEvent
Beskrivelse:
Returnerer event.detail { isOpen: true } eller event.detail { isOpen: false } nÄr hjelpeteksten Äpnes eller lukkes

defaultOptions (element)

Prop:
value?
Type:
string
Beskrivelse:
Verdi som sendes ved valg
Prop:
label?
Type:
string
Beskrivelse:
Tekst som vises for valget
Prop:
prefix?
Type:
string
Beskrivelse:
Tekst som vises fĂžr valget
Prop:
description?
Type:
string
Beskrivelse:
Beskrivelse av valget
Prop:
disabled?
Type:
boolean
Beskrivelse:
Valget er deaktivert
Prop:
selected?
Type:
boolean
Beskrivelse:
Valget er valgt
Prop:
tagSkinColor?
Type:
"blue" | "blue-dark" | "blue-light" | "green" | "red" | "yellow" | "beige" | "gray" | "grey"
Beskrivelse:
Farge pÄ tag

options (element)

Prop:
value?
Type:
string
Beskrivelse:
Verdi som sendes ved valg
Prop:
label?
Type:
string
Beskrivelse:
Tekst som vises for valget
Prop:
prefix?
Type:
string
Beskrivelse:
Tekst som vises fĂžr valget
Prop:
description?
Type:
string
Beskrivelse:
Beskrivelse av valget
Prop:
disabled?
Type:
boolean
Beskrivelse:
Valget er deaktivert
Prop:
selected?
Type:
boolean
Beskrivelse:
Valget er valgt
Prop:
tagSkinColor?
Type:
"blue" | "blue-dark" | "blue-light" | "green" | "red" | "yellow" | "beige" | "gray" | "grey"
Beskrivelse:
Farge pÄ tag