Chip

4.1.5

The Chip component is a compact element that represent an input, attribute, or action.

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)
NamnTypBeskrivning

ariaLabel

stringAria label attribute for enhanced accessibility.

customAttribute

{ attribute: string; value: string | number }Add this for testing. Clickable and requested subcomponents will get suffixed with "-[ComponentName]".

disabled

booleanIf true, the component is disabled.

elevation

"undefined" | "1" | "2"Elevation of the chip. Used primarily in dark mode to handle modals and layers.

id

string

label *

stringThe label text.

loading

booleanIf true, displays a loading skeleton instead of the chip content.

onClick

(event: MouseEvent) => voidCallback fired when chip is clicked.

ref

RefRef forwarding to access the DOM element of the chip.

selected

booleanIf true, shows the chip in a visually selected state.

startIcon

string | ComponentClass | FunctionComponentLeading icon in the chip. Will be overwritten when in selected state.

sx

SxPropsCustom styles applied to the chip.

Installation

npm install @sj-ab/component-library.ui.chip

Länkar

Best practices

Examples

Filter chips

Filter chips

Filter chips with popup menu

Filter chips with popup menu

Suggestion chips

Suggestion chips

Tillgänglighet

Semantik

Chip presenteras som en <div> om den inte är interaktiv, eller som en knapp (<button type="button">) när den är interaktiv och har fått en klicklyssnare med onClick.

Vald eller inte vald?

Ett klickbart Chip kan markeras som vald med attributet selected. Komponenten får då en check-ikon och markeras automatiskt som vald för hjälpmedel med aria-pressed="true".

Förtydligande uppläsning för skärmläsare

Som standard får Chip ett namn av den synliga texten inuti komponenten.

Det är dock möjligt att skriva över den synliga texten med attributet ariaLabel om man vill förtydliga för användare som inte ser. Det kan till exempel gälla ett chip som används som filter i tidtabellen och vi vill förtydliga att ett filter är aktivt.

Change log

Statistik

  • Importer av Chip

    62

  • Repos med Chip

    45%

  • Senaste installerade version av Chip

    4.1.3

  • Äldsta installerade version av Chip

    3.0.21