Checkbox Card
Checkboxes can be used to turn an option on or off.
Namn | Typ | Beskrivning |
---|---|---|
active * | boolean | Indicates if the card is currently active. |
activeState | "active" |
"warning" | Defines the border color of the card when it is active. |
boxProps | Partial | Due to a problem when using RadioButtonCard together with toggle button, the box has to |
cardSize | "small" |
"medium" | Specifies a fixed size for the card, overriding responsive breakpoints. |
cardSx | SxProps | The system prop that allows defining system overrides as well as additional CSS styles. |
children | ReactNode | |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
disableContentPadding | boolean | Prop to disable padding on the bottom content. Use this if you need to use the full width |
disableRightComponentPadding | boolean | If true, disables padding in the right component. |
elevation | number | The elevation of the card. |
error | boolean | Indicates if the component is in an error state, applying error-specific styling for validation feedback. |
id * | string | A unique ID for the checkbox input. |
limitedClickArea | boolean | If the card should limit the interactive area to the top portion. Needed for accessibility if lower portion contains another interactive element |
onChange | (event: ChangeEvent) => void | Change event handler |
onSizeChange | (size: undefined |
"small" |
"medium") => void | Callback for when the card size changes. Used in CheckboxPriceCard |
value * | string | Value fo the checkbox |
wrapRightComponentToBottom | boolean | If the card should wrap the right component to the bottom on very small breakpoints. Used in RadioPriceCard. |
npm install @sj-ab/component-library.ui.checkbox-card
Importer av Checkbox Card
15Repos med Checkbox Card
40%Senaste installerade version av Checkbox Card
5.1.11Äldsta installerade version av Checkbox Card
5.1.7