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
Vurder noe annet:
- Skjemaelement, som alternativ til radio group
- Navigasjon
Har du innspill til komponenten?
Send forslagEksempler
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
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 | Interaksjon |
| 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. |
Modal-interaksjon
Radix sin ToggleGroup og React-modal har en corner-case der hvis ToggleGroup er første fokuserbare element i Modal, hopper man ut av modalen ved shift+tab. Vi har ikke funnet en god fiks for dette, så som alternativ kan man sette closeButton={false} og så legge til lukkeknapp først i modalen manuelt.
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.
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.
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
Tokens
| Token | Fallback |
| --ac-toggle-group-bg | --a-surface-default |
| --ac-toggle-group-border | --a-border-default |
| --ac-toggle-group-button-bg | --a-surface-default |
| --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-action-on-action-subtle |
| --ac-toggle-group-selected-bg | --a-surface-action-selected |
| --ac-toggle-group-selected-text | --a-text-on-action |
