ToggleGroup

GithubYarn FigmaEndringslogg
  • Filter
  • Veksling av datavisninger og innhold
  • Skjemaelement, som alternativ til radio group
  • Navigasjon
Send forslag
KommandoInteraksjon
TabFlytter fokus til aktiv toggle button
ShiftTabFlytter 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
Ikke klem sammen komponenten slik at teksten går over 2 linjer.
Toggle button group som strekker seg utenfor skjermen.
Sørg for at det er stor nok plass i UI slik at hele komponenten er synlig.
Toggle button group med ett valg.
Komponenten må ha minimum 2 valg.
Toggle button group med for mange valg.
Komponenten bør ikke ha mer enn 4 - 5 valg, om det er plass i UI.
En toggle button med tooltip som forklarer handlingen.
Bruk en tooltip for å beskrive hva valget gjør.
Toggle button group brukt til filtrering
Komponenten filtrerer dataene som vises i tabellen.
Toggle button group som veksler mellom graf og tabell.
Komponenten veksler om dataene skal vises som graf eller tabell.
Toggle button group brukt som skjemafilter.
Komponenten styrer hvordan noen av feltene i et skjema vises.
Toggle button group brukt som skjemaelement, som er feil.
Toggle button group passer ikke som skjemaelement.
Radio group brukt i skjema
Radio group er riktig å bruke som skjemaelement.
Toggle group brukt som navigasjon
Toggle group passer ikke til navigasjon mellom paneler.
Tab bruk til panelnavigasjon
Tab er designet til å brukes til panelnavigasjon.
TokenFallback
--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
Hva er dette?