<lm-listbox> – Listeboks / Listbox

Om komponenten

Kanonisk navn

<lm-listbox>

Synonymer

valgliste, flervalgsliste, listbox, select list

Kategori

skjema

ARIA-mønster

Listbox

Parts

liste

Native-first-vurdering

<select> (enkeltvalg, popup) dekkes nå fullt ut av native Customizable Select (appearance: base-select, se <lm-select-field>) - ingen egen komponent trengs lenger for et rikt stylet, enkeltvalgs nedtrekksvalg. Denne komponenten finnes kun for de to tilfellene native <select> fortsatt ikke dekker: (1) multiple/size-attributtene har ingen tilsvarende Customizable Select-støtte ennå (kun "aktivt prototypet", ikke i noen spesifikasjon per open-ui.org sin Customizable Select-forklaring, sist sjekket 2026), så et flervalg med rik styling per valg må fortsatt bygges selv; og (2) en alltid synlig (ikke-popup) liste er heller ikke noe native <select> kan gi uten size-støtte.

Nettleserstøtte

Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er. Revurdert i 2026: erstatter ikke komponenten med native Customizable Select fordi multiple/size-attributtene ikke er en del av den standarden ennå - se nativeFirstVurdering.

Design-tokens

var(--color-accent, ...), var(--color-surface-muted, ...), var(--color-surface-inverse-text, ...), var(--color-focus-ring, ...), var(--space-2xs, ...), var(--space-small, ...), var(--radius-small, ...), var(--radius-medium, ...), var(--border-width, ...)

Sist endret

20. september 2026

Brukt

Ikke i bruk andre steder ennå

Formål

En rikt stylet liste hvor brukeren velger ett eller flere elementer - f.eks. flervalg av kategorier i et filterpanel, der native <select multiple> sitt utseende er for begrenset. Implementerer ARIA APG sitt Listbox-mønster fullt ut: role="listbox"/"option", roving tabindex, piltast-/Home-/End-navigasjon og mellomromsvalg.

Egner seg for

• Flervalg med rik visuell styling per valg (ikoner, farger, flerlinjers innhold) som <select multiple> ikke kan gi.
• Enkeltvalg der en tilpasset, alltid synlig liste (ikke en nedtrekksliste) er ønskelig.

Egner seg ikke for

• Enkle tekstvalg uten behov for egen styling - bruk native <select>/<select multiple> fremfor å legge til unødvendig JS.
• Et enkeltvalg i en nedtrekksliste (popup) med rik styling per valg (ikoner, flerlinjers innhold) - bruk <lm-select-field>, som siden 2026 opter inn i Customizable Select (appearance: base-select) og allerede stylet med de samme tokenene, helt uten egen JS.
• Søkbare nedtrekksforslag koblet til et tekstfelt - bruk et <input list>/<datalist>-par, se kobleDatalistSok(), i stedet.

Bruk

<script type="module" src="/designsystem/komponenter/skjema/listbox/listbox.js"></script>

<lm-listbox multippel aria-label="Kategorier">
    <div role="option" data-verdi="mat">🍽️ Mat</div>
    <div role="option" data-verdi="transport">🚗 Transport</div>
    <div role="option" data-verdi="bolig">🏠 Bolig</div>
</lm-listbox>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Events

Slots

Parts

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-listbox::part(liste) {
    /* egne stiler for "Wrapperen med `role="listbox"`." */
}

Tilgjengelighet

Wrapperen har role="listbox" (og aria-multiselectable i multippel-modus); hvert valg trenger role="option" satt av forbrukeren. Roving tabindex holder kun ett valg i tab-rekkefølgen om gangen; piltaster flytter fokus, mellomrom/Enter/klikk velger.

• Wrapperen har role="listbox"; i multippel-modus settes også aria-multiselectable="true".
• Hvert valg trenger role="option" (satt av forbrukeren) og får aria-selected/roving tabindex styrt av komponenten.
• Piltaster (opp/ned) flytter fokus syklisk; Home/End hopper til første/siste; mellomrom/Enter/klikk veksler eller setter valgt tilstand.

Detaljer

• Verdien leses fra data-verdi-attributtet på hvert valg-element, ikke fra tekstinnholdet - slik kan visningstekst og verdi skille seg (f.eks. et ikon + label vs. en ren id).
• verdi/verdier-propertyene er skrivebeskyttet - selve valget skjer via klikk/tastatur, ikke ved å sette propertyen direkte.

Referanser

Se også:

• ../../../funksjoner/dom/koble-datalist-sok/index.html - brukes i stedet når listen skal kobles til et søkbart tekstfelt.
• ../select-field/index.html - brukes i stedet for et enkeltvalg i en nedtrekksliste - stylet med Customizable Select siden 2026, ingen egen komponent nødvendig lenger for det tilfellet.

Avhengigheter: Ingen