Radio Group

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

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

simple, clean, and fully customizable