5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tb0b,

Description

Radio Group for Framer-Styled States: simple, clean, and fully customizable without code.

The Radio Group component allows you to quickly add radio buttons to your project with a clean and simple design and ready to use right out of the box. It also features multiple property overrides so that you can match your project's design. Add it to forms, containers, dashboards, everywhere.

Customization

You can customize all the content:

Title
Options list
Set the disabled option to the disabled state
Default Option
Group Name to track the checked option with your own custom implementation

You can customize all the styles:

Spacing
Title color, margin, and font
Options list color, spacing, default colors, checked colors, and more
Direction
Background color

Usage

To use the component, copy it and paste it into your Framer canvas.

All of the dynamic properties can be adjusted on the sidebar in the section RadioGroup.

Properties

Group Name—Name for radio buttons
Title—Control title styles and content
- Text—Displayed title text
- Text Color—Color of title text
- Margin Bottom—Margin between title and options
- Font—Font-related styles (e.g. Font-Family, Font-Size, Line-Height, etc.)
Options - Available options
- Label—Option Label
- Value—Option value
- Disabled—Set option as disabled
Default Option—Option that is checked by default
Options Styles - Control options styles
- Font—Font-related styles (e.g., Font-Family, Font-Size, Line-Height, etc.)
- Gap—Spacing between options
- Text Color—Color of option label
- Radio Background Color—Color of radio input default state
- Radio Outline Color—Color of radio input default outline color
- Checked Radio Background Color—Color of checked radio input
- Checked Radio Spot Background Color—Color of checked radio input inner circle
- Squared Radio—Transform the radio inputs into squares instead of circles
- Radio Size—Size of radio input
Required—Set if input is required
Required Color—Color of required asterisk
Direction—Direction in which the options should be displayed: horizontal or vertical
Background Color—Color of component background
Padding—Padding of component

5a:[["$","$L5d",null,{"post":{"id":"01999ffe-d367-76d0-9107-61f7a59db279","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7c929c23-1162-47a4-b459-a0651efe64aa","name":"Concealed","slug":"concealed","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1242931/avatar-UwgSqFrdUyvuNG93m0Z8JtGKDbBCSt.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"ADcgnTQlWM9XHCUnIX4W","resolved":true,"title":"Radio Group","body":"$5e","bodyJson":null,"introduction":"simple, clean, and fully customizable","slug":"radio-group","author":{"framerUserId":"7c929c23-1162-47a4-b459-a0651efe64aa","name":"Concealed","slug":"concealed","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1242931/avatar-UwgSqFrdUyvuNG93m0Z8JtGKDbBCSt.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ADcgnTQlWM9XHCUnIX4W/radio-group-jBVKe57QL8MOv1H0OdzjO6ZTcnkrJ7","metadata":{"tint":{"h":240,"s":67,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-12T12:22:21.427Z","updatedAt":"2026-04-14T12:32:54.368Z","publishedAt":"2025-10-01T13:38:21.671Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://lavender-prototyper-554331.framer.app/","price":"2","paymentUrl":"https://buy.polar.sh/polar_cl_DpjDxVnhlof6KSmuaGYtijGczSeyZ4xMOnC3O31tkFd","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"skNDg0Yr8Kv2QKBGlnoH","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-01T13:38:21.671Z","updatedAt":"2025-10-01T13:38:21.671Z","reported":false}}],"$L5f"]

Suggested for you