Tilbake til forsidenDesignsystemet

ToggleGroup

Oppdatert 30. sep. 2022
YarnGå til yarn pakkeKodeGå til github-kodeFigmaÅpne i Figma

Toggle group brukes til å ta ett valg som påvirker innholdet på en side. Komponenten består av en gruppe med knapper som henger sammen. En knapp er alltid valgt. Man endrer valg ved å klikke på knappene som ikke er valgt. Det er samme mentale modell som radio group.

Egnet til å:

  • Filter
  • Veksling av datavisninger og innhold

Vurder noe annet:

  • Skjemaelement, som alternativ til radio group
  • Navigasjon
Kom i gang som designer

aksel.nav.no

Installer

aksel.nav.no

Eksempler

Åpne 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.

Med eller uten label

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

Knappeinnhold

En toggle har 3 innholdsvarianter:

  • Text – kun tekst
  • Text + icon – tekst med ikon på venstre side
  • Icon – kun ikon
Informasjon

Om knappeinnholdet kun er ikoner er det stor fare for at brukerne ikke forstår valgene. Dette alternativet bør 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.

Disabled

Toggle group kan ikke være disabled.

Tilgjengelighet

Interaksjon Tastatur

Toggle group bruker standard focus state (ramme).
Vi bruker roving tabindex for å håndtere fokusbevegelse mellom toggle buttons.

KommandoInteraksjon
TabFlytter fokus til aktiv toggle button
ShiftTabFlytter fokus til element før ToggleGroup i tabindex
SpaceVelger en knapp.
EnterVelger en knapp.
ArrowDownFlytter fokus til neste knapp i gruppa.
ArrowRightFlytter fokus til neste knapp i gruppa.
ArrowUpFlytter fokus til forrige knapp i gruppa.
ArrowLeftFlytter fokus til forrige knapp i gruppa.
HomeFlytter fokus til første knapp i gruppa.
EndFlytter fokus til siste knapp i gruppa.

Bruk

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 toggle button group byttes ut med en select.

Toggle button med tekst over 2 linjer
Ikke klem sammen komponenten slik at teksten går over 2 linjer.
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.
Select

aksel.nav.no

Antall valg

Antall valg i en toggel button group bør begrenses til 2 - 5 stk. Om du har flere valg bør du bruke en select.

Toggle button group med ett valg.
Komponenten må ha minimum 2 valg.
Toggle button group med for mange valg.
Komponenten bør ikke ha mer enn 4 - 5 valg, om det er plass i UI.

Forklare handling

Det er god praksis å legge på en tooltip som forklarer handlingen til en toggle button. Ekstra viktig om du kun bruker ikoner som knappeinnhold.

En toggle button med tooltip som forklarer handlingen.
Bruk en tooltip for å beskrive hva valget gjør.

Egnet til filtrering

Toggle button group egner seg til filtrering. Begrepet filtrering kan tolkes bredt. Et vanlig scenario er filtrering av lister og tabeller.

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

Egnet til innholdsveksling

Komponenten egner seg også godt til å veksle mellom datavisninger og innhold på en side. For eksempel kan den brukes til å veksle mellom datavisning med "tabell" og "graf". Eller å vise en løsning som "saksbehandler" eller "bruker".

Toggle button group som veksler mellom graf og tabell.
Komponenten veksler om dataene skal vises som graf eller tabell.

Egnet til skjemafilter

Denne komponenten egner seg til filtrering av skjemalementer. Eksempelvis om forskjellige skjemaelementer vises avhengig av hvilket valg du tar.

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

Uegnet som skjemaelemnent

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

Toggle button group brukt som skjemaelement, som er feil.
Toggle button group passer ikke som skjemaelement.
Radio group brukt i skjema
Radio group er riktig å bruke som skjemaelement.

Uegnet til navigasjon

Denne komponenten egner seg ikke til navigasjon. Om det gjelder panelnavigasjon er det bedre å bruke tabs.

Toggle group brukt som navigasjon
Toggle group passer ikke til navigasjon mellom paneler.
Tab bruk til panelnavigasjon
Tab er designet til å brukes til panelnavigasjon.

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 IDen til containeren til innholdet som endrer seg. Evt. flytte fokus til containeren etter brukeren velger Togglegroup-knappen.

Props

ToggleGroup

children ReactNode
Toggles.Item elements
size?"medium" | "small"
Changes padding and font-size
value? string
Controlled selected value
defaultValue? string
If not controlled, a default-value needs to be set
onChange (value: string) => void
Callback for selected toggle
label? ReactNode
Label describing ToggleGroup
className? string
ref? Ref<HTMLDivElement>
ToggleGroup extends HTMLDivElement

ToggleGroup.Item

children ReactNode
Content
value string
Value for state-handling
className? string
ref? Ref<HTMLButtonElement>
ToggleGroup.Item extends HTMLButtonElement

Var denne artikkelen til hjelp?