• Filter
  • Veksling av datavisninger og innhold
  • Skjemaelement, som alternativ til radio group
  • Navigasjon
Installer
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.
Select
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.
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
className? string
ref? Ref<HTMLDivElement>
ToggleGroup extends HTMLDivElement
children ReactNode
Content
value string
Value for state-handling
className? string
ref? Ref<HTMLButtonElement>
ToggleGroup.Item extends HTMLButtonElement