npm install @thrivecart/uiyarn add @thrivecart/uipnpm add @thrivecart/uibun add @thrivecart/uiimport { CheckboxCardGroup, CheckboxCardItem } from '@thrivecart/ui';A group of card-style checkboxes for multi-select
<CheckboxCardGroup className="max-w-md">
<CheckboxCardItem
label="Email Notifications"
description="Receive email updates about your campaigns"
/>
<CheckboxCardItem
label="SMS Notifications"
description="Get text messages for urgent alerts"
/>
<CheckboxCardItem
label="Push Notifications"
description="Browser push notifications for real-time updates"
/>
</CheckboxCardGroup>The indicator renders a checkbox visual inside the card. Control its position with indicatorPlacement ('start', 'end'), or hide it with indicator={null}.
Checkbox indicator at different positions, or hidden
Indicator at end (default)
Indicator at start
No indicator
{/* End (default) */}
<CheckboxCardItem label="Option" description="..." />
{/* Start */}
<CheckboxCardItem indicatorPlacement="start" label="Option" description="..." />
{/* Hidden */}
<CheckboxCardItem indicator={null} label="Option" description="..." />Select which notification channels to enable
<CheckboxCardGroup className="max-w-md">
<CheckboxCardItem
icon={<MdEmail className="size-5 text-icon" />}
label="Email Digest"
description="Daily summary of sales, refunds, and new subscribers"
defaultChecked
/>
<CheckboxCardItem
icon={<MdSms className="size-5 text-icon" />}
label="SMS Alerts"
description="Instant text for high-value orders and failed payments"
/>
<CheckboxCardItem
icon={<MdNotifications className="size-5 text-icon" />}
label="Browser Push"
description="Real-time notifications for new orders"
/>
</CheckboxCardGroup>Select which payment methods to accept on checkout
<CheckboxCardGroup className="grid-cols-3 max-w-2xl">
<CheckboxCardItem
icon={<MdCreditCard className="size-5 text-icon" />}
label="Credit Card"
description="Visa, Mastercard, Amex"
defaultChecked
/>
<CheckboxCardItem
icon={<MdAccountBalance className="size-5 text-icon" />}
label="Bank Transfer"
description="Direct ACH payments"
defaultChecked
/>
<CheckboxCardItem
icon={<MdPayment className="size-5 text-icon" />}
label="PayPal"
description="Pay with PayPal balance"
/>
</CheckboxCardGroup>Select optional paid features to add to a plan
<CheckboxCardGroup className="max-w-lg">
<CheckboxCardItem
icon={<MdInsights className="size-5 text-icon" />}
label="Advanced Analytics"
description="Conversion funnels, cohort analysis, and revenue attribution"
addon={<span className="text-xs font-medium text-primary-solid">+ $19/mo</span>}
defaultChecked
/>
<CheckboxCardItem
icon={<MdPeople className="size-5 text-icon" />}
label="Team Collaboration"
description="Invite up to 10 team members with role-based permissions"
addon={<span className="text-xs font-medium text-primary-solid">+ $29/mo</span>}
/>
<CheckboxCardItem
icon={<MdShoppingCart className="size-5 text-icon" />}
label="Order Bump & Upsells"
description="Post-purchase upsells and one-click order bumps on checkout"
addon={<span className="text-xs font-medium text-primary-solid">+ $9/mo</span>}
defaultChecked
/>
</CheckboxCardGroup>Select integrations to connect with indicator at start
<CheckboxCardGroup className="grid-cols-2 max-w-xl">
<CheckboxCardItem
indicatorPlacement="start"
icon={<MdIntegrationInstructions className="size-5 text-icon" />}
label="Zapier"
description="Connect to 5,000+ apps"
defaultChecked
/>
<CheckboxCardItem
indicatorPlacement="start"
icon={<MdWebhook className="size-5 text-icon" />}
label="Webhooks"
description="Custom HTTP event callbacks"
defaultChecked
/>
<CheckboxCardItem
indicatorPlacement="start"
icon={<MdCloud className="size-5 text-icon" />}
label="Google Sheets"
description="Sync orders to spreadsheets"
/>
<CheckboxCardItem
indicatorPlacement="start"
icon={<MdStorage className="size-5 text-icon" />}
label="Airtable"
description="Push data to Airtable bases"
/>
</CheckboxCardGroup>Cards in disabled and checked-disabled states
<CheckboxCardGroup className="max-w-md">
<CheckboxCardItem
label="Available Option"
description="This option can be selected"
/>
<CheckboxCardItem
label="Disabled Option"
description="This option is not available"
disabled
/>
<CheckboxCardItem
label="Checked & Disabled"
description="This option is locked in"
disabled
defaultChecked
/>
</CheckboxCardGroup>Each card should have a concise label and a helpful description explaining the option.
Keep all cards in a group the same size for visual alignment.
A single checkbox card for a yes/no question is overkill. Use a standard Checkbox.
Use either card checkboxes or standard checkboxes within the same form section.
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | - | Card title text |
description | ReactNode | - | Card description text |
icon | ReactElement | - | Leading icon element |
addon | ReactNode | - | Additional content below the description |
indicator | ReactNode | null | Default checkbox | Custom indicator element, or null to hide |
indicatorPlacement | 'start' | 'end' | 'end' | Position of the indicator |
disabled | boolean | false | Disable the checkbox card |
defaultChecked | boolean | false | Initial checked state (uncontrolled) |
checked | boolean | - | Controlled checked state |
onCheckedChange | (checked: boolean) => void | - | Callback when checked state changes |
className | string | - | Additional className for the card wrapper |
aria-checked.