Chip

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.Checkbox

Chip.Checkbox kan brukes som et alternativ til Checkbox.

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

render(<CheckboxVariant />)

Chip.Removable

Chip.Removable inneholder et kryss som viser at filteret kan fjernes.

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

render(<Removable />)

Chip.Button

Chip.Button kan brukes som et alternativ til Button.

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.