Hopp til innhold
Aksel

Komponenter

ToggleGroup

ToggleGroup lar brukeren ta valg som påvirker innholdet på siden. Komponenten består av en gruppe knapper som henger sammen og bare én knapp kan være valgt om gangen.

Egnet til:

  • Filtrering av innhold
  • Veksling mellom visninger

Uegnet til:

  • Erstatning for radio eller checkbox
  • Navigasjon

Eksempler

Retningslinjer

Med eller uten label

Label gjør det lettere for brukeren å skjønne hva komponenten skal brukes til. Hvis du ikke bruker label, bør knappeinnholdet beskrive valgene godt.

Kun ikoner

Hvis knappeinnholdet kun er ikoner, er det stor fare for at brukerne ikke forstår valgene. Dette alternativet bør bare brukes i tjenester for ekspertbrukere eller i situasjoner hvor det er en global forståelse av hva ikonet betyr. Bruk i så fall Tooltip rundt knappen eller title på ikonet. På eksterne flater bør det ikke brukes kun ikon.

Forklare handling

Det er god praksis å legge på en Tooltip som forklarer handlingen til en toggle-knapp.

Gjør
En toggle item med Tooltip som forklarer handlingen.

Plassering og bredde

Det må være plass til hele komponenten på skjermen, slik at alle valg er godt synlig for brukeren. Hvis det ikke er plass, kan ToggleGroup byttes ut med en Select eller en ToggleGroup med kun ikoner + Tooltip.

Unngå
Toggle button med tekst over 2 linjer
Ikke klem sammen komponenten slik at teksten går over 2 linjer.
Unngå
Toggle button group som strekker seg utenfor skjermen.
Sørg for at det er stor nok plass i UI slik at hele komponenten er synlig.

Egnet til filtrering

ToggleGroup egner seg til mange typer filtrering. Et vanlig scenario er filtrering av lister og tabeller.

Gjør
Toggle button group brukt til filtrering
Komponenten filtrerer dataene som vises i tabellen.

Egnet til innholdsveksling

Komponenten egner seg godt til å veksle mellom innhold. For eksempel kan den brukes til å veksle mellom datavisning med "tabell" og "graf".

Gjør
ToggleGroup som veksler mellom graf og tabell.
ToggleGroup lar deg veksle mellom graf og tabell.

Uegnet som skjemaelement

Denne komponenten egner seg ikke som et skjemaelement. Bruk heller Radio eller RadioCard.

Unngå
ToggleGroup brukt som skjemaelement, som er feil.
ToggleGroup passer ikke som skjemaelement.
Gjør
RadioGroup brukt i skjema
I dette tilfellet er det bedre å bruke RadioGroup.

Uegnet til navigasjon

Denne komponenten egner seg ikke til navigasjon, siden dette vil være uventet oppførsel og potensielt forvirrende. For panelnavigasjon er det bedre å bruke Tabs.

Husk at du fint kan endre URLen uten at dette nødvendigvis teller som navigasjon, som en måte å knytte komponentens tilstand til URLen.

Unngå
ToggleGroup brukt som navigasjon
ToggleGroup passer ikke til navigasjon mellom paneler.
Gjør
Tabs brukt til panelnavigasjon
Tabs er designet for å brukes til panelnavigasjon.

Tekniske retningslinjer

Innholdet som styres bør helst befinne seg umiddelbart etter ToggleGroup i DOMen. Hvis ikke, bør du bruke aria-controls på ToggleGroup for å henvise til containeren til innholdet som endrer seg.

Tilgjengelighet

Komponenten implementerer roving tabindex for fokus og tastaturnavigasjon mellom knappene.

Tokens

Komponent-tokens ble fjernet i versjon 8

Gammel dokumentasjon for disse finner du på jsDelivr

Props

ToggleGroup

children

  • Type:
    ReactNode
  • Description:

    Toggles.Item elements.

size?

  • Type:
    "medium" | "small" | "xsmall"
  • Default:
    medium
  • Description:

    Changes padding and font-size.

value?

  • Type:
    string
  • Description:

    Controlled selected value.

defaultValue?

  • Type:
    string
  • Description:

    If not controlled, a default-value needs to be set.

onChange

  • Type:
    (value: string) => void
  • Description:

    Callback for selected toggle.

label?

  • Type:
    ReactNode
  • Description:

    Label describing ToggleGroup.

data-color?

  • Type:
    AkselMainColorRole | AkselBrandColorRole | AkselMetaColorRole
  • Description:

    Overrides inherited color.

    We recommend only using accent and neutral. We have disallowed status-colors. @see 🏷️ {@link AkselColor } @see 📝 Documentation

fill?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Stretch each button to fill avaliable space in container.

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

variant?

  • Deprecated:
    Use `data-color` prop instead.
  • Type:
    "action" | "neutral"

ToggleGroup.Item

className?

  • Type:
    string

label?

  • Type:
    ReactNode
  • Description:

    Item label.

icon?

  • Type:
    ReactNode
  • Description:

    Item Icon.

ref?

  • Type:
    Ref<HTMLButtonElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

children?

  • Deprecated:
    Use `label` and/or `icon` as replacement.
  • Type:
    ReactNode

Endringslogg

DatoEndringer
20.08.2025Fjernet: Egnet til skjemafilter

Forvalter

Team
Aksel
Artikkel oppdatert 16. oktober 2026
Send innspill
Om du har noen innspill eller tilbakemeldinger kan du sende dem inn på GitHub.
Send innspill
Slack
For lavterskel deling og hjelp kan du bruke Slack-kanalen for å stille spørsmål og diskutere løsninger.
Slack