Toggle group

Unable to parse html

const Preview = () => {
  return (
    <ToggleGroup data-toggle-group='Filter' 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 toggle group når

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

Unngå toggle group 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

Toggle group 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 toggle group godt. Forklar handlingane med tooltip når du brukar berre ikon.

Unable to parse html

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

render(<OnlyIcons />)

Secondary variant

Unable to parse html

const Secondary = () => {
  return (
    <ToggleGroup
      data-toggle-group='Filter'
      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 toggle group 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 toggle group 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.

Toggle group 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.