Intro
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.
Egnet til:
- Filtering av innhold
- Veksling av datavisninger og innhold
Uegnet til:
- Erstatning for radio eller checkbox
- Navigasjon
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 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
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 toggle button group byttes ut med en select.
Relevante lenker
Antall valg
Antall valg i en toggle 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 skjemaelement
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.
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 IDen til containeren til innholdet som endrer seg. Ev. flytte fokus til containeren etter at brukeren velger Togglegroup-knappen.
Tilgjengelighet
Tastaturinteraksjon
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. |
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
- ToggleGroup.Item extends HTMLButtonElement
Tokens
| Token | Fallback |
|---|---|
| --ac-toggle-group-bg | --a-surface-transparent |
| --ac-toggle-group-border | --a-border-default |
| --ac-toggle-group-button-bg | --a-surface-transparent |
| --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-default |
| --ac-toggle-group-selected-bg | --a-surface-action-selected |
| --ac-toggle-group-selected-text | --a-text-on-action |
| --ac-toggle-group-button-neutral-bg | --a-surface-transparent |
| --ac-toggle-group-button-neutral-text | --a-text-default |
| --ac-toggle-group-button-neutral-hover-bg | --a-surface-neutral-subtle-hover |
| --ac-toggle-group-button-neutral-hover-text | --a-text-default |
| --ac-toggle-group-neutral-selected-bg | --a-surface-neutral-selected |
| --ac-toggle-group-neutral-selected-text | --a-text-on-neutral |
