ToggleGroup

GithubYarn FigmaEndringslogg
  • Filtering av innhold
  • Veksling av datavisninger og innhold
  • Erstatning for radio eller checkbox
  • Navigasjon
Send forslag
KommandoInteraksjon
TabFlytter fokus til aktiv toggle button
Shift+TabFlytter fokus til element før ToggleGroup i tabindex
SpaceVelger en knapp.
EnterVelger en knapp.
ArrowDownFlytter fokus til neste knapp i gruppa.
ArrowRightFlytter fokus til neste knapp i gruppa.
ArrowUpFlytter fokus til forrige knapp i gruppa.
ArrowLeftFlytter fokus til forrige knapp i gruppa.
HomeFlytter fokus til første knapp i gruppa.
EndFlytter fokus til siste knapp i gruppa.
Toggle button med tekst over 2 linjer
Don't: Ikke klem sammen komponenten slik at teksten går over 2 linjer.
Toggle button group som strekker seg utenfor skjermen.
Don't: Sørg for at det er stor nok plass i UI slik at hele komponenten er synlig.
Toggle button group med ett valg.
Don't: Komponenten må ha minimum 2 valg.
Toggle button group med for mange valg.
Don't: Komponenten bør ikke ha mer enn 4 - 5 valg, om det er plass i UI.
En toggle button med tooltip som forklarer handlingen.
Do: Bruk en tooltip for å beskrive hva valget gjør.
Toggle button group brukt til filtrering
Do: Komponenten filtrerer dataene som vises i tabellen.
Toggle button group som veksler mellom graf og tabell.
Do: Komponenten veksler om dataene skal vises som graf eller tabell.
Toggle button group brukt som skjemafilter.
Do: Komponenten styrer hvordan noen av feltene i et skjema vises.
Toggle button group brukt som skjemaelement, som er feil.
Don't: Toggle button group passer ikke som skjemaelement.
Radio group brukt i skjema
Do: Radio group er riktig å bruke som skjemaelement.
Toggle group brukt som navigasjon
Don't: Toggle group passer ikke til navigasjon mellom paneler.
Tab bruk til panelnavigasjon
Do: Tab er designet til å brukes til panelnavigasjon.
TokenFallback
--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