Radio Group
Rich radio group variants for selecting plans, payment methods, team members, and more. Each variant provides a unique card-based selection experience.
Installation
You can add this component using our CLI or manually:
$npx omnira-ui@latest add radio-group
Icon Simple
A list of selectable cards with icon, title, description, and radio indicator.
Icon Simple
Checkbox
Cards with a checkbox-style indicator, title, price, and description.
Checkbox
Payment Icon
Payment method selection with logos, card details, and radio indicator.
Payment Icon
Avatar
Team member selection with avatar, name, username, and role.
Avatar
Icon Card
A card grid with icon, pricing, description, and optional badge.
Icon Card
Usage
Import RadioGroups and use the desired variant.
tsx
import { RadioGroups } from "@/components/ui/RadioGroup";
// Icon Simple
<RadioGroups.IconSimple aria-label="Plans" defaultValue="basic" items={plans} />
// Checkbox
<RadioGroups.Checkbox aria-label="Plans" defaultValue="basic" items={plans} />
// Payment Icon
<RadioGroups.PaymentIcon aria-label="Payment" items={paymentCards} />
// Avatar
<RadioGroups.Avatar aria-label="Users" defaultValue="@olivia" items={people} />
// Icon Card
<RadioGroups.IconCard aria-label="Plans" defaultValue="basic" items={iconCardPlans} />Shared Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | array | — | Array of option items (see variant-specific types). |
| defaultValue | string | — | Initially selected value. |
| aria-label | string | — | Accessible label for the group. |
Variants
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| RadioGroups.IconSimple | component | — | List with icon, title, secondary title, description, radio indicator, optional badge. |
| RadioGroups.Checkbox | component | — | List with checkbox indicator, title, price, description. |
| RadioGroups.PaymentIcon | component | — | List with payment logo, title, description, radio indicator. |
| RadioGroups.Avatar | component | — | List with avatar image, name, username, title, radio indicator. |
| RadioGroups.IconCard | component | — | Card grid with icon, title, price, description, radio indicator, optional badge. |