<lm-button-group> – Knappegruppe / Button group

Om komponenten

Kanonisk navn: <lm-button-group>
Synonymer: handlingsrad, knapperad, action row, button row, action group
Kategori: handling, layout
ARIA-mønster: Ikke aktuelt - Standardmodusen (type="gruppe") er kun semantisk gruppering med role="group", ikke et eget APG-widgetmønster. Komponenten støtter derimot to fullverdige APG-mønstre via type-attributtet - se type-attributtbeskrivelsen og tilgjengelighetDetaljer for lenker til Toolbar og Radio Group.
Parts: gruppe
Native-first-vurdering: HTML har ingen generell container for handlingsknapper; <fieldset> passer bare for faktiske felter. Derfor brukes en enkel wrapper med native knapper og minimal ARIA.
Nettleserstøtte: Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er.
Sist endret: 19. september 2026
Brukt: 2 steder

Formål

Visuell og semantisk gruppering av relaterte knapper, f.eks. "Avbryt"/"Lagre" eller flere "+ Legg til"-handlinger. Gruppen får role="group" og valgfri aria-label, slik at skjermlesere annonserer handlingene samlet.

Egner seg for

Handlingsrader i dialoger og skjemaer, f.eks. "Avbryt"/"Lagre" eller "Tilbake"/"Neste".
Flere likeverdige handlingsknapper som bør annonseres samlet med role="group".
Med type="verktoylinje": en rad med mange kontroller der roving tabindex forbedrer tastaturnavigasjonen.
Med type="enkeltvalg": en segmentert bryter der nøyaktig ett av flere alternativer skal være valgt om gangen.

Egner seg ikke for

En enkelt knapp uten reell gruppering.
Store, komplekse kontrollsett med blandede kontrolltyper (ikke bare knapper) - vurder en dedikert komponent i så fall.

Bruk

<script type="module" src="/designsystem/komponenter/handling/button-group/button-group.js"></script>

<!-- Handlingsknapper nederst i en dialog - høyrestilt -->
<lm-button-group align="end">
    <button type="button" command="close" commandfor="min-dialog">Avbryt</button>
    <button type="submit">Lagre</button>
</lm-button-group>

<!-- Flere likestilte "legg til"-knapper - venstrestilt (standard) -->
<lm-button-group label="Legg til i turen">
    <button type="button" command="show-modal" commandfor="stopp-dialog">+ Legg til stopp</button>
    <button type="button" command="show-modal" commandfor="fly-dialog">+ Legg til fly</button>
</lm-button-group>

<!-- Segmentert bryter - APG Radio Group, kun ett valg om gangen -->
<lm-button-group type="enkeltvalg" label="Visning">
    <button type="button" data-verdi="liste" aria-checked="true">Liste</button>
    <button type="button" data-verdi="kart">Kart</button>
</lm-button-group>

<!-- Verktøylinje med mange kontroller - APG Toolbar, roving tabindex -->
<lm-button-group type="verktoylinje" label="Tekstformatering">
    <button type="button">Fet</button>
    <button type="button">Kursiv</button>
    <button type="button">Understreket</button>
</lm-button-group>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`align`	`"start" \| "end"`	"start"	Attributt. "end" høyrestiller knappene (dialog-handlinger). "start" (standard) venstrestiller dem og lar dem bryte over flere linjer.
`label`	`string`	null	Attributt/property. Settes som aria-label på gruppen, når gruppens hensikt ikke er åpenbar av knappetekstene alene.
`type`	`"gruppe" \| "verktoylinje" \| "enkeltvalg"`	"gruppe"	Attributt/property. "gruppe" (standard) gir kun `role="group"` og vanlig tab-rekkefølge. "verktoylinje" gir `role="toolbar"` med roving tabindex og piltast-navigasjon (Toolbar-mønsteret). "enkeltvalg" gir `role="radiogroup"` med knappene som `role="radio"` - kun én kan være valgt (segmentert bryter, Radio Group-mønsteret).

Events

Event	Type	Beskrivelse
`button-group:valgt`	`CustomEvent`	Dispatches i `type="enkeltvalg"`-modus når en knapp velges (klikk eller piltast). `detail.verdi` er knappens `data-verdi`, eller tekstinnholdet hvis attributtet mangler.

Slots

Slot	Beskrivelse
(standard)	To eller flere `<button>`-elementer (eller `<a>` stylet som knapp).

Parts

Part	Beskrivelse
`gruppe`	Indre wrapper med role="group".

Styling med ::part()

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

lm-button-group::part(gruppe) {
    /* egne stiler for "Indre wrapper med role="group"." */
}

Tilgjengelighet

Den interne wrapperen får role="group" (standard), role="toolbar" (type="verktoylinje") eller role="radiogroup" (type="enkeltvalg"), og label kopieres til aria-label når attributtet er satt. I de to sistnevnte modusene styrer komponenten roving tabindex og piltast-navigasjon; i standardmodusen beholder slottede <button>/<a>-elementer bare native tastaturstøtte.

Den interne wrapperen får role="group"/"toolbar"/"radiogroup" avhengig av type, og label kopieres til aria-label når attributtet er satt.
Slottede <button>- og <a>-elementer beholder native tastaturstøtte i standardmodusen.
I type="verktoylinje": kun én knapp er i tab-rekkefølgen om gangen (roving tabindex); venstre/høyre (eller opp/ned) flytter fokus mellom knappene, Home/End hopper til første/siste - selve klikk-/aktiveringsatferden er uendret (Toolbar-mønsteret).
I type="enkeltvalg": knappene får role="radio" og aria-checked; piltaster flytter OG velger samtidig, slik at nøyaktig én knapp alltid er valgt (Radio Group-mønsteret).

Detaljer

role="group" settes alltid, også uten label, fordi det gir tydeligere gruppering enn løse knapper i et vanlig <div> eller en <dialog>.
Native command/commandfor-attributter fungerer uendret på knappene; komponenten wrapper bare innholdet.

Referanser

Se også:

../link-button/index.html - brukes når én av handlingene i eller rundt en knapperad egentlig er navigasjon og bør være en ekte lenke.
../../tilbakemelding/confirm-dialog/index.html - bruker samme type handlingsrad med avbryt/bekreft-knapper i en modal dialog.

Brukes av:

turer/index.html og turer/trip.html - erstatter tidligere .dialog-actions- og .legg-til-knapper-klassene i alle skjema-dialoger.
turer/trip.html - handlingsknappene ("Rediger tur"/arkiver-knapp) øverst på tur-siden.

Avhengigheter: Ingen