Chip

Kildekode på GitHub · Les som Markdown

Chip er en interaktiv komponent for filtrering og valg. Den fungerer som en toggle-knapp med tydelig visuell tilbakemelding — ved valg får den mørk bakgrunn og viser en "x" for å indikere at den kan fjernes. Bygget på Radix UI Toggle.

Importering

import { Chip } from "@kilden/designsystem";

Grunnleggende bruk

<Chip>Filter</Chip>

Kontrollert bruk

function ChipDemo() {
const [pressed, setPressed] = React.useState(false);
return (
  <Chip pressed={pressed} onPressedChange={setPressed}>
    Aktiv
  </Chip>
);
}

Filtergruppe

function FilterDemo() {
const [filters, setFilters] = React.useState({
  design: false,
  utvikling: true,
  strategi: false,
});
const toggle = (key) =>
  setFilters((prev) => ({ ...prev, [key]: !prev[key] }));
return (
  <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
    <Chip pressed={filters.design} onPressedChange={() => toggle("design")}>
      Design
    </Chip>
    <Chip pressed={filters.utvikling} onPressedChange={() => toggle("utvikling")}>
      Utvikling
    </Chip>
    <Chip pressed={filters.strategi} onPressedChange={() => toggle("strategi")}>
      Strategi
    </Chip>
  </div>
);
}

Bruksanbefalinger

Bruk for filtrering og valg

Chip passer for filterknapper der brukeren kan velge og fjerne aktive filtre.

Ikke bruk for statisk metadata

For informasjon som ikke kan togles, bruk Badge i stedet.

Bruk korte, beskrivende labels

Hold chip-teksten kort og tydelig — ett eller to ord er ideelt.

Ikke bruk for lange tekster

Chip er ment for korte labels. For lengre innhold, vurder andre komponenter.

Tilgjengelighet

Bruker aria-pressed for å kommunisere av/på-tilstand til skjermlesere
Enter eller Space toggler chippen
Fokusring med tydelig kontrast for tastaturnavigasjon
Deaktivert tilstand kommuniseres via disabled

Props

Prop	Type	Default	Beskrivelse
`pressed`	`boolean`	—	Kontrollert av/på-tilstand
`defaultPressed`	`boolean`	`false`	Starttilstand (ukontrollert)
`onPressedChange`	`(pressed: boolean) => void`	—	Kalles når tilstanden endres
`disabled`	`boolean`	`false`	Deaktiver chippen