Selection Card

Card-style radio options for selecting between choices. Works inside a RadioGroup and auto-detects its variant from the icon or image prop.

Installation

tsx

import { RadioGroup } from "madagent"; import { SelectionCard } from "madagent";

Default

BasicFor personal projects and experimentation.

StandardFor small teams that need collaboration.

EnterpriseFor organizations with advanced needs.

With Icon

PerformanceOptimized for speed and low latency.

SecurityEnd-to-end encryption and compliance.

GlobalMulti-region deployment worldwide.

With Image

MinimalClean and distraction-free.

VibrantBold colors and expressive layout.

DarkEasy on the eyes, great at night.

Disabled

AvailableThis option can be selected.

Also AvailableThis one too.

UnavailableComing soon.

Prop	Type	Default	Description
`value*`	`string`	-	The value submitted when this card is selected
`title*`	`string`	-	Card headline text
`description`	`string`	-	Supporting text below the title
`icon`	`ReactNode`	-	Icon element displayed above the title (activates icon variant)
`image`	`ReactNode`	-	Image element displayed at the top of the card (activates image variant)
`disabled`	`boolean`	`false`	Whether this card is disabled

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

أساسيللمشاريع الشخصية والتجارب.

قياسيللفرق الصغيرة التي تحتاج إلى التعاون.

مؤسسيللمؤسسات ذات الاحتياجات المتقدمة.

Usage

tsx

<RadioGroup name="خطة" defaultValue="standard">
  <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
    <SelectionCard value="basic" title="أساسي" description="للمشاريع الشخصية والتجارب." />
    <SelectionCard value="standard" title="قياسي" description="للفرق الصغيرة التي تحتاج إلى التعاون." />
    <SelectionCard value="enterprise" title="مؤسسي" description="للمؤسسات ذات الاحتياجات المتقدمة." />
  </div>
</RadioGroup>