Checkbox Card
5.2.7
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-cardSemantik
CheckboxCard presenteras som en HTML kryssruta. <input> är dolt visuellt och syns enbart för skärmläsare.
<input type="checkbox" aria-labelledby="checkbox-button-card-label-container">Tillgängligt namn
CheckboxCard får automatiskt ett tillgängligt namn för skärmläsare från den synliga texten som sätts med label, labelSecondaryText, labelPrimaryMeta, labelSecondaryMeta, samt eventuellt innehåll i rightComponent.
Allt innehåll inuti kortets children kopplas till <input> med aria-describedby så att även de läses upp av skärmläsare när kryssrutan får fokus.
Allt detta sköts internt inne i komponenten med aria-labelledby och aria-describedby
Begränsad klickyta
Som standard är hela kortet klickbart och del av samma klickyta.
Om du vill placera ett annat klickbart objekt inuti CheckboxCard, till exempel en länk, måste du använda propen limitClickArea. Detta är mycket viktigt för att undvika tillgänglighetsproblem med nästlade interaktiva objekt!
Då kommer enbart den övre delen i kortet vara klickbart. Alla children blir egna fristående element i DOM:en.
Checkbox Card med begränsad klickyta
200% textförstoring
Checkbox Card har inbyggt stöd för textförstoring upp till 200% på alla skärmstorlekar. När det blir ont om plats kommer meta-texterna till höger flyttas ner och läggas under.
Importer av Checkbox Card
Repos med Checkbox Card
Senaste installerade version av Checkbox Card
Äldsta installerade version av Checkbox Card