Selectable Card · astryx-svelte

Selectable Card @astryx-svelte/core v0.3.0 · SelectableCard

Usage

A card that toggles between selected and unselected states with an accent border. For navigation use ClickableCard.

ts
 
import { SelectableCard } from '@astryx-svelte/core';

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.
Do	When focused, toggle selection with Space or Enter.
Don't	Use for navigation; use ClickableCard for that.

Common configurations, variations, and states.

SelectableCard — Elevated

Raised selectable cards with elevation="low". The inset selection ring composes on top of the shadow, so a selected card keeps its elevation.

SelectableCardMulti

Multi-select tag picker using color variant selectable cards with color-matched selection borders.