Chip
6.0.0
The Chip component is a compact element that represent an input, attribute, or action.
| Namn | Typ | Beskrivning |
|---|---|---|
ariaLabel | string | Aria 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 | boolean | If 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 * | string | The label text. |
loading | boolean | If true, displays a loading skeleton instead of the chip content. |
onClick | (event: MouseEvent) => void | Callback fired when chip is clicked. |
ref | Ref | Ref forwarding to access the DOM element of the chip. |
selected | boolean | If true, shows the chip in a visually selected state. |
startIcon | string |
ComponentClass |
FunctionComponent | Leading icon in the chip. Will be overwritten when in selected state. |
sx | SxProps | Custom styles applied to the chip. |
npm install @sj-ab/component-library.ui.chipExamples
Filter chips
Filter chips with popup menu
Suggestion chips
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.
Importer av Chip
Repos med Chip
Senaste installerade version av Chip
Äldsta installerade version av Chip