Intro
ToggleGroup lar brukeren ta valg som påvirker innholdet på siden. Komponenten består av en gruppe knapper som henger sammen og bare én knapp kan være valgt om gangen.
Eksempler
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.
Action eller neutral
Du kan bruke den blå (action) eller den grå (neutral) avhengig av kontekst. Neutral brukes til handlinger som man ønsker å tone ned.
Med eller uten label
Komponenten fungerer med og uten label. Vær oppmerksom på at label gjør det lettere for brukeren å skjønne hva komponenten skal brukes til. Om du ikke bruker label bør knappeinnholdet beskrive valgene godt.
Knappeinnhold
En ToggleGroup har 3 innholdsvarianter:
Om knappeinnholdet kun er ikoner er det stor fare for at brukerne ikke forstår valgene. Dette alternativet bør bare 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.
Retningslinjer
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 ToggleGroup byttes ut med en Select.
Antall valg
Det bør være minst 2 og maks 5 valg i en ToggleGroup. 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-knapp. Det er ekstra viktig om du kun bruker ikoner.
Egnet til filtrering
ToggleGroup egner seg til mange typer filtrering. Et vanlig scenario er filtrering av lister og tabeller.
Egnet til innholdsveksling
Komponenten egner seg godt til å veksle mellom innhold. 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
ToggleGroup kan brukes for å styre hvilke felter i et skjema som skal vises.
Uegnet som skjemaelement
Denne komponenten egner seg ikke som et skjemaelement. Det anbefales å heller bruke RadioGroup.
Uegnet til navigasjon
Denne komponenten egner seg ikke til navigasjon, siden dette vil være uventet oppførsel og potensielt forvirrende. Om det gjelder panelnavigasjon er det bedre å bruke Tabs.
Husk at du fint kan endre URLen uten at dette nødvendigvis teller som navigasjon, som en måte å knytte komponentens tilstand til URLen.
Tekniske 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 containeren til innholdet som endrer seg.
Tilgjengelighet
Tastaturinteraksjon
ToggleGroup bruker standard fokusindikator (ramme).
Vi bruker roving tabindex for å håndtere fokusbevegelse mellom knappene.
| Kommando | Interaksjon |
|---|---|
| Tab | Flytter fokus til aktiv toggle button |
| Shift+Tab | Flytter fokus til elementet 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. |
Props
ToggleGroup
children
- Type:
ReactNode - Description:
size?
- Type:
"medium" | "small" - Default:"medium"
- Description:
value?
- Type:
string - Description:
defaultValue?
- Type:
string - Description:
onChange
- Type:
(value: string) => void - Description:
label?
- Type:
ReactNode - Description:
variant?
- Type:
"action" | "neutral" - Default:"action"
- Description:
fill?
- Type:
boolean - Default:false
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
ToggleGroup.Item
className?
- Type:
string
value
- Type:
string - Description:
children?
- Type:
ReactNode - Description:
label?
- Type:
ReactNode - Description:
icon?
- Type:
ReactNode - Description:
ref?
- Type:
LegacyRef<HTMLButtonElement> - Description:
