XDSSelectableCard@xds/core · SelectableCard
Usage
A card that toggles between selected and unselected states with an accent border. For navigation use ClickableCard.Best practices
| Guidance | Practices |
|---|---|
| Do | Use for plan pickers, filter chips, or option grids. |
| Do | For single-select track one ID; for multi-select use a Set. |
| Don't | Use for navigation — use ClickableCard for that. |
Anatomy
| Element | Description | |
|---|---|---|
| Container | required | Interactive div with accent border on selection. |
| Content | required | Children rendered inside the card. |
Import
ts
Props
| Prop | Type | Description |
|---|---|---|
labelrequired | string | Accessibility label. |
isSelectedrequired | boolean | Controlled selection state. |
onChangerequired | (isSelected: boolean) => void | Called when toggled. |
isDisabled | boolean (default: false) | Disables the card. |
children | ReactNode | Card content. |
padding | SpacingStep (default: 4) | Inner padding. |
variant | 'default' | 'transparent' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow' (default: 'default') | Background color variant. |
width | SizeValue | Card width. |
height | SizeValue | Card height. |
maxWidth | SizeValue | Maximum card width. |