<lm-select-field> – Nedtrekksliste / Select field

Om komponenten

Kanonisk navn: <lm-select-field>
Synonymer: dropdown, valgliste, select box, picker
Kategori: skjema
ARIA-mønster: Ikke aktuelt - Wrapper rundt et enkelt native <select>, som allerede er den korrekte, fullstendige nedtrekkslisten - ikke et eget APG-widgetmønster (APG Listbox dekker den rikere varianten, se <lm-listbox>).
Parts: etikett, etikett-tekst, felt, hjelpetekst, feilmelding
Native-first-vurdering: Bruker et ekte <select> internt, med native <option>/<optgroup>-bygging, tastaturnavigasjon og mobilnedtrekk. Komponenten legger kun til konsistent etikett-/hjelpetekst-/feilmeldingsoppsett, form-association og en JSON/JS-vennlig måte å sette valgene på. Siden 2026 opter feltet i tillegg inn i Customizable Select (appearance: base-select, støttet i nyeste Chrome/Safari) slik at selve nedtrekkslisten er stylet med designsystemets egne tokens (bakgrunn, radius, skygge, valgt/hover-farge) i stedet for nettleserens standard-utseende - helt uten egen JS-håndtering av åpning/lukking/tastatur, og ignorert trygt (ren native fallback) av nettlesere uten støtte.
Nettleserstøtte: Ingen spesielle forbehold - ElementInternals/form-associated custom elements støttes i alle moderne evergreen-nettlesere. Den tilpassede nedtrekks-stylingen bruker appearance: base-select (Customizable Select), støttet i nyeste Chrome og Safari - nettlesere uten støtte ignorerer verdien og viser feltet med helt vanlig, native <select>-utseende (progressiv forbedring, ingen funksjonstap).
Design-tokens: var(--border-color, ...), var(--radius-small, ...), var(--radius-medium, ...), var(--opacity-muted, ...), var(--opacity-disabled, ...), var(--color-feil, ...), var(--color-accent, ...), var(--color-surface, ...), var(--color-surface-text, ...), var(--color-surface-muted, ...), var(--color-surface-inverse-text, ...), var(--color-focus-ring, ...), var(--shadow-elevated, ...), var(--font-liten, ...)
Sist endret: 20. september 2026
Brukt: 1 sted

Formål

Nedtrekksliste med samme etikett-/hjelpetekst-/feilmeldingsoppsett som resten av skjemafelt-familien. Valgene settes enten som en kort JSON-array i options-attributtet for statiske lister, eller som en JS-array via options-propertyen for dynamiske/hentede lister (samme mønster som <lm-data-table> sin kolonner-property).

Egner seg for

Et fast, kjent sett med gjensidig utelukkende valg (enhet, valuta, frekvens, status) - både statiske og dynamisk hentede.
Grupperte valg via {gruppe, valg}-formen, som gir <optgroup>.

Egner seg ikke for

Søk-med-forslag mot et stort eller åpent datasett - bruk et <input list>/<datalist>-par, se kobleDatalistSok().
Et lite, alltid synlig sett med 2-4 valg der alle alternativene bør være synlige samtidig - bruk <lm-radio-group-field>.

Bruk

<script type="module" src="/designsystem/komponenter/skjema/select-field/select-field.js"></script>

<!-- Statisk liste - én linje -->
<lm-select-field name="varighetEnhet" label="Enhet" options='[{"value":"timer","label":"Timer"},{"value":"dager","label":"Dager","selected":true}]'></lm-select-field>

// Dynamisk liste hentet fra et API/oppslag
const felt = document.querySelector("lm-select-field[name=tidssone]");
felt.options = tidssoner.map((tz) => ({value: tz.id, label: tz.visningsnavn}));

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`label`	`string`		Attributt/property. Synlig etikett-tekst.
`name`	`string`		Attributt. Skjemafelt-navn - komponenten er form-associated og deltar i FormData under dette navnet.
`options`	`string \| Array<{value, label, disabled?, selected?} \| {gruppe, valg}>`		Attributt (JSON-streng, for statiske valg i én linje) eller property (JS-array, for dynamiske/hentede lister). Elementer kan også være `{gruppe: "...", valg: [...]}` for `<optgroup>`.
`value`	`string`		Attributt/property. Valgt verdi.
`required`	`boolean`	false	Attributt/property. Gjør et reelt valg obligatorisk og legger til en stjerne i etiketten.
`disabled`	`boolean`	false	Attributt/property. Deaktiverer feltet (arves også automatisk fra en `<fieldset disabled>`).
`help`	`string`		Attributt. Kort hjelpetekst vist under feltet, koblet via `aria-describedby`.

Parts

Part	Beskrivelse
`etikett`	Det omsluttende `<label>`-elementet.
`etikett-tekst`	`<span>`-en med selve etikett-teksten.
`felt`	Det interne `<select>`-elementet.
`hjelpetekst`	`<small>`-elementet med hjelpeteksten.
`feilmelding`	`<small role="alert">`-elementet med valideringsmeldingen.

Styling med ::part()

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

lm-select-field::part(etikett) {
    /* egne stiler for "Det omsluttende `<label>`-elementet." */
}

lm-select-field::part(etikett-tekst) {
    /* egne stiler for "`<span>`-en med selve etikett-teksten." */
}

lm-select-field::part(felt) {
    /* egne stiler for "Det interne `<select>`-elementet." */
}

lm-select-field::part(hjelpetekst) {
    /* egne stiler for "`<small>`-elementet med hjelpeteksten." */
}

lm-select-field::part(feilmelding) {
    /* egne stiler for "`<small role="alert">`-elementet med valideringsmeldingen." */
}

Metoder

Metode	Parametre	Returverdi	Beskrivelse
`checkValidity()`	-		Videresender til den interne `ElementInternals.checkValidity()`.
`reportValidity()`	-		Videresender til den interne `ElementInternals.reportValidity()`.

Tilgjengelighet

Samme etikett-/hjelpetekst-/feilmeldingsoppsett som <lm-text-field>. Selve <select>-elementet beholder all native tastatur- og skjermleserstøtte uendret - komponenten setter ingen egne ARIA-roller på det.

Samme <label>/aria-describedby-oppsett som <lm-text-field>.
Selve <select>-elementet beholder all native tastatur- og skjermleserstøtte uendret.

Detaljer

Er form-associated og deltar i FormData under sitt name-attributt.
options kan settes som en JSON-streng (attributt, statisk) eller som en ekte JS-array (property, dynamisk) - begge bygger de samme interne <option>/<optgroup>-elementene.
Tekstinnhold escapes med escapeHtml før innsetting, slik at API-hentede etiketter aldri kan injisere markup.
Nedtrekkslisten (::picker(select)) og hvert valg (option) er stylet med Customizable Select - bakgrunn, radius, skygge og valgt/hover-farge kommer fra de samme tokenene som resten av designsystemet, ikke nettleserens standard-utseende.

Referanser

Se også:

../../../funksjoner/dom/koble-datalist-sok/index.html - brukes i stedet for søk-med-forslag mot en større eller åpen datakilde.
../radio-group-field/index.html - brukes i stedet når alle valgene bør være synlige samtidig uten å åpne en nedtrekksliste.
../../../guider/skjemafelt/index.html - full oversikt over hvilken feltkomponent som dekker hvilken native input-type.

Brukes av:

Ingen ennå - ny komponent.

Avhengigheter: designsystem/komponenter/skjema/skjema-felt-delt.css, designsystem/komponenter/skjema/skjema-felt-delt.js, designsystem/funksjoner/sikkerhet/escape-html/