Radio Group

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