ContainerCard11 props
Selectable Card
A card that toggles between selected and unselected states with an accent border. For navigation use ClickableCard.
공식 문서 열기Preview
Compact density
A selectable card keeps selection visible without layout shift.Import
import {SelectableCard} from '@astryxdesign/core/SelectableCard';Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.
When to use
A card that toggles between selected and unselected states with an accent border. For navigation use ClickableCard.
cardselectabletogglecheckboxradioselection
Important props
variantdefault | transparent | muted | blue | cyan | gray | green | orange | pink | purple | red | teal | yellowoptional
Theming targets
astryx-selectable-card
Best practices
- DoUse for plan pickers, filter chips, or option grids.
- DoFor single-select track one ID; for multi-select use a Set.
- Do notUse for navigation; use ClickableCard for that.