Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

ToggleGroup

Oppdatert 9. mai 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Varianter
    • Størrelser
    • Action eller neutral
    • Med eller uten label
    • Knappeinnhold
  • Retningslinjer
    • Plassering
    • Antall valg
    • Forklare handling
    • Egnet til filtrering
    • Egnet til innholdsveksling
    • Egnet til skjemafilter
    • Uegnet som skjemaelement
    • Uegnet til navigasjon
    • Tekniske retningslinjer
  • Tilgjengelighet
    • Tastaturinteraksjon
  • Props
    • ToggleGroup
    • ToggleGroup.Item
  • Tokens

Intro

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 av datavisninger og innhold

Uegnet til:

  • Erstatning for radio eller checkbox
  • Navigasjon

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Varianter

Størrelser

Komponenten kommer i to størrelser: medium og small. Medium er standard, og brukes både på eksterne og interne flater. Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.

Action eller neutral

Du kan bruke den blå (action) eller den grå (neutral) avhengig av kontekst. Neutral brukes til handlinger som man ønsker å tone ned.

Med eller uten label

Komponenten fungerer med og uten label. Vær oppmerksom på at label gjør det lettere for brukeren å skjønne hva komponenten skal brukes til. Om du ikke bruker label bør knappeinnholdet beskrive valgene godt.

Knappeinnhold

En ToggleGroup har 3 innholdsvarianter:

  • Kun tekst
  • Tekst med ikon på venstre side
  • Kun ikon

tipsTips

Om 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. På eksterne flater bør det ikke brukes kun ikon.

Retningslinjer

Plassering

Det må være plass til hele komponenten på skjermen, slik at alle valg er godt synlig for bruker. Om det ikke er plass (på mobil eller i andre grensesnitt med liten plass) kan ToggleGroup byttes ut med en Select.

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.

Antall valg

Det bør være minst 2 og maks 5 valg i en ToggleGroup. Om du har flere valg bør du bruke en Select.

UnngåToggleGroup med ett valg.
UnngåToggleGroup med for mange valg.

Forklare handling

Det er god praksis å legge på en Tooltip som forklarer handlingen til en toggle-knapp. Det er ekstra viktig om du kun bruker ikoner.

GjørEn toggle item med Tooltip som forklarer handlingen.

Egnet til filtrering

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

GjørToggle 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", eller å vise en løsning som "saksbehandler" eller "bruker".

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

Egnet til skjemafilter

ToggleGroup kan brukes for å styre hvilke felter i et skjema som skal vises.

GjørToggle button group brukt som skjemafilter.
Komponenten styrer hvordan noen av feltene i et skjema vises.

Uegnet som skjemaelement

Denne komponenten egner seg ikke som et skjemaelement. Det anbefales å heller bruke RadioGroup.

UnngåToggleGroup brukt som skjemaelement, som er feil.
ToggleGroup passer ikke som skjemaelement.
GjørRadioGroup 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. Om det gjelder 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ørTabs 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

Tastaturinteraksjon

Komponenten implementerer roving tabindex for fokus og tastaturnavigering mellom knappene.

Props

ToggleGroup

children

  • Type:
    ReactNode
  • Description:

size?

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

value?

  • Type:
    string
  • Description:

defaultValue?

  • Type:
    string
  • Description:

onChange

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

label?

  • Type:
    ReactNode
  • Description:

variant?

  • Type:
    "action" | "neutral"
  • Default:
    "action"
  • Description:

fill?

  • Type:
    boolean
  • Default:
    false
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

ToggleGroup.Item

className?

  • Type:
    string

value

  • Type:
    string
  • Description:

label?

  • Type:
    ReactNode
  • Description:

icon?

  • Type:
    ReactNode
  • Description:

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

children?

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

Tokens

TokenFallback
--ac-toggle-group-bg--a-surface-transparent
--ac-toggle-group-border--a-border-default
--ac-toggle-group-button-bg--a-surface-transparent
--ac-toggle-group-button-text--a-text-default
--ac-toggle-group-button-hover-bg--a-surface-action-subtle
--ac-toggle-group-button-hover-text--a-text-default
--ac-toggle-group-selected-bg--a-surface-action-selected
--ac-toggle-group-selected-text--a-text-on-action
--ac-toggle-group-button-neutral-bg--a-surface-transparent
--ac-toggle-group-button-neutral-text--a-text-default
--ac-toggle-group-button-neutral-hover-bg--a-surface-neutral-subtle-hover
--ac-toggle-group-button-neutral-hover-text--a-text-default
--ac-toggle-group-neutral-selected-bg--a-surface-neutral-selected
--ac-toggle-group-neutral-selected-text--a-text-on-neutral
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

Relaterte komponenter

  • Radio thumbnail
    Radio
  • Select thumbnail
    Select
  • Tooltip thumbnail
    Tooltip

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack