ToggleGroup lar brukeren ta valg som påvirker innholdet på siden. Komponenten består av en gruppe knapper som henger sammen og bare en knapp er kan være valgt om gangen.
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 med lav prioritet.
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
Interaksjon
Tab
Flytter fokus til aktiv toggle button
Shift+Tab
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.
Don't: Ikke klem sammen komponenten slik at teksten går over 2 linjer.
Don't: Sørg for at det er stor nok plass i UI slik at hele komponenten er synlig.
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.
Don't: Komponenten må ha minimum 2 valg.
Don't: 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.
Do: 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.
Do: 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".
Do: 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.
Do: 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.
Don't: Toggle button group passer ikke som skjemaelement.
Do: 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.
Don't: Toggle group passer ikke til navigasjon mellom paneler.
Do: 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
variant?"action" | "neutral"
Changes design and interaction-visuals
className? string
ref? Ref<HTMLDivElement>
Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
ToggleGroup extends HTMLDivElement
ToggleGroup.Item
children ReactNode
Content
value string
Value for state-handling
className? string
ref? Ref<HTMLButtonElement>
Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
