<lm-radio-group-field> – Radioknapp-gruppe / Radio group field

Om komponenten

Kanonisk navn: <lm-radio-group-field>
Synonymer: radio button group, radioknapper, enkeltvalg
Kategori: skjema
ARIA-mønster: Radio Group
Parts: fieldset, etikett-tekst, valg-liste, hjelpetekst, feilmelding
Native-first-vurdering: Bruker ekte native <input type="radio">-elementer med et felles, internt gruppenavn og et omsluttende <fieldset>/<legend> - nettleseren håndterer selv gruppering, pil-tastnavigasjon og gjensidig utelukkelse uten egen ARIA/JS-navigasjonslogikk.
Nettleserstøtte: Ingen spesielle forbehold - ElementInternals/form-associated custom elements støttes i alle moderne evergreen-nettlesere.
Design-tokens: var(--space-xs, ...), var(--color-accent, ...), var(--color-feil, ...), var(--font-liten, ...), var(--opacity-muted, ...)
Sist endret: 20. september 2026
Brukt: 1 sted

Formål

En gruppe native radioknapper generert fra en options-liste (samme one-liner-JSON-attributt/JS-property-mønster som <lm-select-field>), pakket i <fieldset>/<legend> for korrekt gruppe-semantikk, med felles hjelpetekst og automatisk feilmeldingsvisning.

Egner seg for

Et lite, alltid synlig sett med 2-5 gjensidig utelukkende valg der alle alternativene bør være synlige samtidig uten å åpne en nedtrekksliste.

Egner seg ikke for

Mer enn ca. 5-6 alternativer, eller når skjermplassen er knapp - bruk <lm-select-field>.
Søk-med-forslag mot et stort eller åpent datasett - bruk et <input list>/<datalist>-par, se kobleDatalistSok().
Et enkeltstående ja/nei-valg - bruk <lm-checkbox-field>.

Bruk

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

<lm-radio-group-field name="frekvens" label="Frekvens" required
    options='[{"value":"manedlig","label":"Månedlig"},{"value":"arlig","label":"Årlig"}]'>
</lm-radio-group-field>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`label`	`string`		Attributt/property. Gruppens overordnede etikett, vist som `<legend>`.
`name`	`string`		Attributt. Skjemafelt-navn - komponenten er form-associated og deltar i FormData under dette navnet.
`options`	`string \| Array<{value, label, disabled?}>`		Attributt (JSON-streng, for statiske valg i én linje) eller property (JS-array, for dynamiske/hentede lister).
`value`	`string`		Attributt/property. Verdien til det valgte alternativet.
`required`	`boolean`	false	Attributt/property. Krever at ett alternativ velges.
`disabled`	`boolean`	false	Attributt/property. Deaktiverer alle radioknappene i gruppen.
`help`	`string`		Attributt. Kort hjelpetekst vist under gruppen, koblet via `aria-describedby`.

Parts

Part	Beskrivelse
`fieldset`	Det omsluttende `<fieldset>`-elementet.
`etikett-tekst`	`<legend>`-elementet med gruppens etikett.
`valg-liste`	`<div>`-en som inneholder alle radio-radene.
`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-radio-group-field::part(fieldset) {
    /* egne stiler for "Det omsluttende `<fieldset>`-elementet." */
}

lm-radio-group-field::part(etikett-tekst) {
    /* egne stiler for "`<legend>`-elementet med gruppens etikett." */
}

lm-radio-group-field::part(valg-liste) {
    /* egne stiler for "`<div>`-en som inneholder alle radio-radene." */
}

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

lm-radio-group-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

Fieldset/legend gir gruppen sin egen tilgjengelighetsnavn-kontekst. Radioknappenes gruppering og pil-tastnavigasjon er nettleserens native oppførsel basert på delt name-attributt. Feilmelding vises som role="alert" etter at brukeren har samhandlet med gruppen eller forsøkt å sende inn skjemaet.

<fieldset>/<legend> gir gruppen sin egen tilgjengelighetsnavn-kontekst, uavhengig av de individuelle radio-etikettene.
Radioknappenes gruppering og pil-tastnavigasjon er nettleserens native oppførsel.

Detaljer

Er form-associated og deltar i FormData under sitt name-attributt med verdien til det valgte alternativet.
Det interne, delte radio-name-attributtet er tilfeldig generert per instans og har ingen sammenheng med komponentens name-attributt - det brukes kun til å gruppere de interne radioknappene mot hverandre.

Referanser

Se også:

../select-field/index.html - brukes i stedet når det er mange valg eller skjermplassen er knapp.
../checkbox-field/index.html - brukes i stedet for et enkeltstående ja/nei-valg.
../../../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/