Skip to content

Selectable Card

@astryxdesign/core v0.7.1 · SelectableCard

Props ​

NameTypeDefaultDescription
labelstring-Accessible name of the hidden checkbox.
isSelectedboolean-Whether the card is selected. Bind with v-model:isSelected.
isDisabledbooleanfalseThe card ignores activation.
variantCardVariant'default'Background variant. A selected card uses that hue for the ring.
elevationCardElevation'none'Resting shadow. The selection ring is composed with it.
paddingSpacingStep-Padding forwarded to Card.
widthnumber | string-Width. Numbers are pixels.
heightnumber | string-Height. Numbers are pixels.
maxWidthnumber | string-Maximum width.

Events ​

NamePayloadDescription
update:isSelectedbooleanThe next selected state.
changebooleanEmitted with update:isSelected.

Slots ​

The default slot is the card body. Nested buttons and links keep their own activation.