ToggleGroup

const Preview = () => {
  return (
    <ToggleGroup defaultValue='innboks'>
      <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
      <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
      <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
      <ToggleGroup.Item value='sendt'>Sendt</ToggleGroup.Item>
    </ToggleGroup>
  );
};

render(<Preview />)

Bruk ToggleGroup når

• du skal veksle mellom visningar, til dømes mellom liste og graf
• innhald i ei liste eller tabell skal filtrerast

Unngå ToggleGroup når

• du har så mange val at dei ikkje får plass i breidda
• vala inneheld lange tekstar som gjer at gruppa verkar tung og uoversiktleg
• alternativa er svar i eit skjema - bruk heller Radio
• valet er ein av/på-innstilling - bruk heller Switch

Eksempel

Kun ikoner

ToggleGroup står utan tekst bør berre brukast når ikona er lett forståelege for brukarane. Det kan til dømes vere ekspertbrukarar eller brukarar av interne tenester som kjenner symbola i den aktuelle ToggleGroup godt. Forklar handlingane med Tooltip når du brukar berre ikon.

const OnlyIcons = () => {
  return (
    <ToggleGroup defaultValue='option-1'>
      <Tooltip content='Venstrestilt'>
        <ToggleGroup.Item value='option-1' icon>
          <AlignLeftIcon aria-hidden />
        </ToggleGroup.Item>
      </Tooltip>
      <Tooltip content='Midtstilt'>
        <ToggleGroup.Item value='option-2' icon>
          <AlignCenterIcon aria-hidden />
        </ToggleGroup.Item>
      </Tooltip>
      <Tooltip content='Høyrestilt'>
        <ToggleGroup.Item value='option-3' icon>
          <AlignRightIcon aria-hidden />
        </ToggleGroup.Item>
      </Tooltip>
    </ToggleGroup>
  );
};

render(<OnlyIcons />)

Secondary variant

const Secondary = () => {
  return (
    <ToggleGroup defaultValue='innboks' variant='secondary'>
      <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
      <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
      <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
      <ToggleGroup.Item value='sendt'>Sendt</ToggleGroup.Item>
    </ToggleGroup>
  );
};

render(<Secondary />)

Retningslinjer

Det er ikkje alltid heilt rett fram å avgjere når du bør bruke ein ToggleGroup i staden for eksempelvis Tabs eller Radio. Valet kjem ofte an på situasjonen og korleis grensesnittet elles er bygd opp. Som ein tommelfingerregel bør ToggleGroup berre brukast når valet har ein direkte og synleg effekt i grensesnittet, til dømes at innhaldet på sida eller eit element vert oppdatert med ein gong basert på kva brukaren vel.

ToggleGroup bør ha minst to val, men ikkje fleire enn at alle vala får plass i breidda. Du må sjølv passe på at det er nok plass til både innhaldet i vala og talet på val utan å bryte linja. Pass på at heile komponenten får plass på skjermen, også på mobil, og at alle vala er godt synlege for brukarane.

Tekst

Ha gjerne med ei ledetekst for gruppa som forklarer kva vala gjeld. Skriv tydelege tekstar for vala i komponenten, og pass på at dei har same språklege form. Bruk gjerne Tooltip til å gje hint, særleg dersom du berre viser ikon.