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.
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
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.
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
João Saraiva
