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.
Live demo
Relaterte komponenter
For gruppering av tekst og innhold uten statushensikt.
Alert kan brukes i en modal ved behov for kritisk informasjon.
Kan brukes for å vise status i tillegg til alert.
Varianter
Comboboxen kan brukes i to forskjellige typer:
| Type | Bruk |
|---|---|
| Enkeltvalg | Brukeren kan velge kun ett alternativ |
| Flervalg | Brukeren kan velge flere alternativer |
Når du bruker flervalg, blir valgene registrert som tags. Tagsene kan plasseres inne i, eller utenfor, feltet.
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 dropdown, 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
Unngå
Beskriv mulighetene til brukeren Dersom du gir brukeren mulighet for å legge
til nye alternativer, forklar tydelig hvordan brukeren skal benytte comboboxen i hjelpeteksten.
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.
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:
Skriv gode ledetekster og instruksjoner i skjema
Tips til hvordan du skriver gode, tydelige ledetekster
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 |
Implementasjon i kode
Hvordan ta komponenten i bruk?
import @oslokommune/punkt-elements/dist/pkt-combobox.js;import { PktCombobox } from '@oslokommune/punkt-react';<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-combobox.js" type="module"></script>Testing
Elements og React: 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");Dersom du bruker verktøyene i punkt-testing-utils så kan dette bli gjort automatisk for deg.
Props og tokens
| Prop | Type | Beskrivelse |
|---|---|---|
name | string | Navn som brukes i skjema ved innsending |
id | string | Unik ID for feltet |
label | string | Tekst som vises over feltet |
placeholder | string | Spesifiserer en kort hint som beskriver forventet verdi av feltet. |
multiple | boolean | Mulighet for å velge flere valg |
tagPlacement | insideoutside | Plassering av valgte verdier i feltet ved flervalg |
maxlength | number | Maks antall valg dersom flervalg er aktivert |
typeahead | boolean | Mulighet for automatisk utfylling av feltet fra listen over valg |
includeSearch | boolean | Mulighet for å søke etter valg inni dropdown |
allowUserInput | boolean | Mulighet for å skrive inn egne verdier |
displayValueAs | labelvalueprefixAndValue | Hvordan valgt verdi vises i feltet |
value | string | Valgt verdi. Streng ved enkelt valg, array av strenger ved flervalg. |
helptext | string | Hjelpetekst som vises over feltet |
helptextDropdown | string | Hjelpetekst som vises over feltet |
helptextDropdownButton | string | Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst |
disabled | boolean | Feltet er deaktivert |
hasError | boolean | Feltet har en feil |
errorMessage | string | Tekst som vises under feltet ved feil |
required | boolean | Feltet må fylles ut |
requiredTag | boolean | Viser en merking som indikerer at feltet er påkrevd |
requiredText | string | Tekst som vises i påkrevd-merkingen |
optionalTag | boolean | Viser en merking som indikerer at feltet er valgfritt |
optionalText | string | Tekst som vises i valgfritt-merkingen |
tagText | string | Tekst som vises i en tag ved siden av label |
fullwidth | boolean | Skal feltet ta opp hele bredden? |
defaultOptions | array | Liste over valg som kan velges, om options sendes inn som array med objekter (denne vil ikke modifiseres ved endring innad i komponenten) |
options | array | Liste over valg som kan velges, om options sendes inn som array med objekter |
Farger
| Element | CSS Variabel |
|---|---|
| Background | |
| Text | |
| Border | |
| Active/chosen element | |
| Tags | |
*Du kan bruke alle tilgjengelige tag-farger. Se oversikt over alle fargevarianter i tag-komponenten for mer informasjon.