Selection Card

Forms

Selection

Card-based selection component for radio-style single choice options.

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

Props

Component API reference

SelectionCard

Prop	Type	Default	Description
`id*`	`string`	—	Unique identifier
`label*`	`string`	—	Main label text
`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

SelectionCardGroup

Prop	Type	Default	Description
`children*`	`ReactNode`	—	SelectionCard components
`value`	`string`	—	Currently selected value
`onChange`	`(value: string) => void`	—	Selection change handler
`label`	`string`	—	Group label text
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation examples

import { SelectionCard, SelectionCardGroup } from '@/components/ui/selection-card'
import { 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"
/>

Features

Built-in functionality

Icon support: Optional icon container with automatic styling
Active indicator: Circular checkbox with check icon when selected
Custom badge: Customizable badge text for selected state
Full-width clickable: Entire card is the click target
Group component: SelectionCardGroup for automatic state management
Disabled state: Visual indication and interaction prevention
Dark mode: Full dark mode support with adjusted colors

Accessibility

Accessibility considerations

ARIA Attributes

SelectionCardGroup uses role="radiogroup"Cards use role="radio" with aria-checkedDisabled state uses aria-disabled

Keyboard Navigation

Key	Action
`Tab`	Navigate between cards
`Arrow keys`	Move selection within group
`Enter / Space`	Select focused card

Notes

Focus ring visible on keyboard navigation
Selected state clearly indicated visually
Disabled cards skip in tab order

Related Components

Radio Group Card Checkbox