Eidetic Design System

Interactive Preview

Select a display density option

Display Density

Selected: comfortable

Without Icons

Simple text-only selection cards

Theme Preference

Custom Active Badge

Customize the badge shown on selected items

Choose a plan

Disabled State

Options that cannot be selected

Features

Built-in functionality

Icon support - Optional icon container with automatic styling
Active indicator - Circular checkbox with check icon
Active badge - Customizable badge for selected state
Full-width clickable - Entire card is the click target
SelectionCardGroup - Container with shared state management
Disabled state - Visual indication and interaction prevention
Accessible - ARIA radiogroup role and keyboard support

Usage

Basic implementation examples

import { SelectionCard, SelectionCardGroup } from '@/components/ui/selection-card'
import { Check, Layout, Minimize2, Maximize2 } from 'lucide-react'

// Using SelectionCardGroup for automatic state management
<SelectionCardGroup
  value={selected}
  onChange={setSelected}
  label="Choose an option"
>
  <SelectionCard
    id="option-1"
    label="Option One"
    description="First option description"
    icon={<Layout className="w-5 h-5" />}
  />
  <SelectionCard
    id="option-2"
    label="Option Two"
    description="Second option description"
    icon={<Minimize2 className="w-5 h-5" />}
  />
</SelectionCardGroup>

// Individual cards with manual state
<SelectionCard
  id="single"
  label="Single Card"
  description="Manually controlled"
  selected={isSelected}
  onClick={(id) => setIsSelected(true)}
  activeBadge="Selected"
/>

API Reference

SelectionCard component props

Prop	Type	Default	Description
id	string	-	Unique identifier (required)
label	string	-	Main label text (required)
description	string	-	Optional description text
icon	ReactNode	-	Icon element to display
selected	boolean	false	Whether option is selected
disabled	boolean	false	Whether option is disabled
activeBadge	string	'Active'	Badge text when selected
onClick	(id: string) => void	-	Click handler