---
title: "RadioGroupCards — Free Framer component · Best of Framer"
description: "Free Framer component · by Francisc Toth · Forms. Animated radio card selector"
canonical: "https://framer.elliotli.dev/component/radiogroupcards"
---

[Home](/)/[Components](/components)/[Forms](/components/category/forms)/RadioGroupCards

# RadioGroupCards

Animated radio card selector

[View on Framer](https://framer.com/marketplace/components/radiogroupcards/?via=elliot-li)

![RadioGroupCards preview image 1](https://framer.elliotli.dev/og/component/radiogroupcards/8f7985a25a106e8b/1600x1200.jpg)

## Summary

Animated radio card selector

## Description

### Overview

A polished radio group component that transforms standard radio buttons into elegant, interactive cards. Built with Framer Motion for smooth animations and designed to match modern UI standards.

### Features

-   **Animated interactions** — Smooth tap animations and radio dot transitions powered by Framer Motion
    
-   **Fully customizable** — Control colors, spacing, typography, and border radius directly from the properties panel
    
-   **Flexible layout** — Switch between vertical and horizontal orientations
    
-   **Dynamic options** — Add, remove, and edit options directly in Framer without touching code
    
-   **Accessible** — Built with proper ARIA roles and hidden native radio inputs for screen reader support
    
-   **Light & dark mode ready** — Easily configure for any color scheme
    

### Customization Options

-   Background, border, and accent colors
    
-   Title and description text colors
    
-   Radio button styling
    
-   Padding, gap, and border radius
    
-   Font family and sizes
    
-   Vertical or horizontal layout
    

### Perfect For

-   Pricing plan selectors
    
-   Subscription tier selection
    
-   Settings and preferences
    
-   Survey and form inputs
    
-   Onboarding flows
    
-   Any single-choice selection UI
    

### How to Use

1.  Drag the component onto your canvas
    
2.  Edit the options array to add your choices (ID, title, description)
    
3.  Set the default selected value
    
4.  Customize colors to match your design system
    
5.  Choose vertical or horizontal layout
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #6200

## Details

- **Author**: Francisc Toth
- **Published**: 2026-02-11
- **Updated**: 2026-09-14
- **Added**: 2026-01-21
- **Categories**: Forms

## More across types

-   [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love

## More like this

-   [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing
-   [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK
-   [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield
-   [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from