ToggleGruppe

Normal

I default varianten kan man bare aktivere èn ToggleKnapp om gangen.

<ToggleGruppe
  defaultToggles={[
    { children: "Mandag", pressed: true },
    { children: "Tirsdag" },
    { children: "Onsdag" },
  ]}
/>
 Kopiert! 

MultiSelect

For å tillate flere aktive ToggleKnapper samtidig kan man bruke multiSelect propen.

<ToggleGruppe
  defaultToggles={[
    { children: "Mandag", pressed: true },
    { children: "Tirsdag" },
    { children: "Onsdag" },
  ]}
  multiSelect
/>
 Kopiert! 

Minst én

Bruk minstEn propen for å håndheve at det alltid må være èn ToggleKnapp som er valgt.

<ToggleGruppe
  defaultToggles={[
    { children: "Mandag" },
    { children: "Tirsdag" },
    { children: "Onsdag" },
  ]}
  minstEn
/>
 Kopiert! 

Kompakt

ToggleGruppe støtter også en kompakt variant som kan passe bra hvis ToggleKnappene har lite tekstinnhold eller bare ikoner.

<ToggleGruppe
  defaultToggles={[
    { children: "B", pressed: true },
    { children: <em style={{ paddingLeft: 2, paddingRight: 2 }}>I</em> },
    { children: <span style={{ textDecoration: "underline" }}>U</span> },
  ]}
  multiSelect
  kompakt
/>
 Kopiert!