Usage

SelectableCard is a card with a selected state. The keyboard stop is a visually hidden checkbox. Bind the state with v-model:is-selected, or pass :is-selected and handle update:isSelected when several cards share one value.

The selected card draws an accent border and an inset ring. elevation stays in the shadow, and the ring is composed on top of it. variant recolors that accent.

<script setup lang="ts">
import { SelectableCard } from '@astryx-vue/core/SelectableCard'
import { ref } from 'vue'

const selected = ref('pro')
</script>

<template>
  <SelectableCard
    :is-selected="selected === 'pro'"
    label="Pro"
    @update:is-selected="(next) => { if (next) selected = 'pro' }"
  >
    Pro
  </SelectableCard>
</template>

Anatomy

Element	Description
Container	Interactive div with accent border on selection.
Content	Children rendered inside the card.

Examples

Elevated

Starter The resting shadow stays put — the selection ring layers on top.

Pro The resting shadow stays put — the selection ring layers on top.

Starter and Pro sit on a low shadow. The selection ring layers on top.

Multi-select

React

TypeScript

Node.js

Python

Rust

Go

React, TypeScript, Node.js, Python, Rust, and Go. Each card keeps its own color, and more than one can be selected.