Intro
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
aksel.nav.no
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.
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.
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.
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.
Egnet til filtrering
Toggle button group egner seg til filtrering. Begrepet filtrering kan tolkes bredt. Et vanlig scenario er filtrering av lister og tabeller.
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".
Egnet til skjemafilter
Denne komponenten egner seg til filtrering av skjemalementer. Eksempelvis om forskjellige skjemaelementer vises avhengig av hvilket valg du tar.
Uegnet som skjemaelemnent
Denne komponenten egner seg ikke som et skjemaelement. Det anbefales å heller bruke radio group.
Uegnet til navigasjon
Denne komponenten egner seg ikke til navigasjon. Om det gjelder panelnavigasjon er det bedre å bruke tabs.