Chip

Unable to parse html

const Preview = () => {
  return (
    <>
      <Chip.Radio name='my-radio' value='nynorsk' defaultChecked>
        Nynorsk
      </Chip.Radio>
      <Chip.Radio name='my-radio' value='bokmål'>
        Bokmål
      </Chip.Radio>
    </>
  );
};

render(<Preview />)

Bruk chip når

• brukeren skal filtrere informasjon, for eksempel i lister eller tabeller
• det skal vises hvilke filtre som er aktive

Unngå chip når

• du skal vise status eller tall, bruk heller badge
• innhold skal merkes med kategori som ikke er interaktiv, bruk heller tag
• du skal lage menyer eller navigasjonselementer

Eksempel

Chip som checkbox

Bruk denne varianten når brukeren skal velge ett eller flere alternativ, for eksempel for å filtrere et søk eller en liste.

Unable to parse html

const CheckboxVariant = () => {
  return <Chip.Checkbox>Nynorsk</Chip.Checkbox>;
};

render(<CheckboxVariant />)

Chip som filtervalg

Viser et aktivt filter som brukeren kan fjerne. Krysset til høyre indikerer at filteret kan tas bort med ett klikk.

Unable to parse html

const Removable = () => {
  return <Chip.Removable aria-label='Slett Norge'>Norge</Chip.Removable>;
};

render(<Removable />)

Chip som button

Bruk denne varianten når chip skal utløse en handling, for eksempel for å tømme alle aktive filtre.

Unable to parse html

const AsButton = () => {
  return <Chip.Button>Tøm alle filtre</Chip.Button>;
};

render(<AsButton />)

Retningslinjer

Chip lar brukerne styre hvordan de vil vise innhold.

Unngå å plassere chip i vertikale lister. Skal du vise alternativ under hverandre, bruk heller checkbox eller radio. En gruppe med flere chip kan brytes over flere linjer.

Tekst

Chip bør ha så få ord som mulig, helst bare ett eller to.