ToggleGroup@navikt/ds-react

betaOppdatert 15. juni 2022

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

Når bør man vurdere noe annet:

Skjemaelement, som alternativ til radio group
Navigasjon

Kom i gang som designer

aksel.nav.no

Endringslogg

aksel.nav.no

Anatomi

1. Label
Tittel som beskriver hva komponenten er i din kontekst.
2. Group
Grupperingen av flere toggle buttons.
3. Selected toggle button
En toggle button som er valgt.
4. Toggle button
En toggle button som ikke er valgt.

Demo

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

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.

Kommando	Beskrivelse
`Tab`	Flytter fokus til aktiv toggle button
`ShiftTab`	Flytter fokus til element før ToggleGroup i tabindex
`Space`	Velger en knapp.
`Enter`	Velger en knapp.
`ArrowDown`	Flytter fokus til neste knapp i gruppa.
`ArrowRight`	Flytter fokus til neste knapp i gruppa.
`ArrowUp`	Flytter fokus til forrige knapp i gruppa.
`ArrowLeft`	Flytter fokus til forrige knapp i gruppa.
`Home`	Flytter fokus til første knapp i gruppa.
`End`	Flytter 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".