Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support

Magic Motion

Animated Tabs
Card List
Card Paging
Container Transitions
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Box
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Radio Button Form

Open in Framer to interactPreview this example

Create radio buttons where only one button is active in each state.

Open in FramerPreview Example

What is a radio button?

A radio button is a simple method of choosing between two or more options. Radio buttons are commonly used when designing online forms or questionnaires. 

When unchecked, radio buttons typically take the form of a small circle with a black outline and white fill - although you can of course make them any size or color you wish. When clicked, however, a dot usually appears at the center of a radio button, indicating that this option has been selected.


Why are they called radio buttons?

Logically enough, radio buttons take their name from the physical buttons on old radios. When selecting a radio bandwidth such as AM, FM, or MW, it was necessary to deselect the previous bandwidth. For this reason, pressing a new bandwidth button automatically caused the old bandwidth button to pop out again to its neutral, disabled, position.

In web design, radio buttons work in exactly the same way. Regardless of whether the buttons use HTML, CSS, or Javascript, clicking on another button will automatically deselect the previous option.


When to use radio buttons?

Radio buttons are often included in forms when the user must choose between a number of options that are presented together as a group. With radio buttons, only one button in a group can be selected at a time, so users are forced to select just one option from among several.


Radio button vs checkbox: which to use?

As they have quite different practical uses, it is important to understand the difference between a checkbox vs radio buttons.

To clarify, we can say that the defining characteristic of radio buttons is precisely the fact that, no matter how many different options are included in the group, only one of them can ever be selected at a given time. They are “either/or” options.

With checkboxes, on the other hand, users are also free to select either several or none of the options provided.


Use radio buttons when:

● The possible answers to a given question are by nature mutually exclusive. E.g. the answer cannot logically be both “apple” and “orange” at the same time, but must either be one or the other. If some users might potentially prefer to choose neither apple nor orange, be sure to provide a radio button for this - such as one labeled “neither” or “other” - or risk having them give up without completing the form.


Use a checkbox when:

● You want to provide users with the possibility to select more than one answer from among a list of several options - including zero, one, or many. E.g. each checkbox is independent of all other checkboxes in the list, so selecting a given option doesn’t deselect any of the others.

● There is only one option - and in any case the user is not necessarily required to select it. For example, this might occur when asking if users wish to opt-in to a mailing list. In this case leaving the checkbox deselected would indicate that the user does not wish to receive the newsletter, whereas selecting the checkbox signs them up.


Creating a radio button group

When setting up your form elements in HTML, in order to be read as a group all the options in your radio group must have the same name. Once the group is created with the proper value of the name attribute, users selecting any radio button in that group will only be able to select one choice when filling out the form. As soon as they select one radio button all other radio buttons in the same group will automatically become deselected.


How to make a radio button in Framer

Creating a radio button form element is simple to create with the Radio Buttons Default Component. This component lets you add fully customizable radio button groups to your prototypes. You can customize the styles for the active, inactive, and hover states, as well as set the transition to got to a specific screen based on the selected option. All you have to do is drag the component on to your canvas to start!

Resources
  • Interactions Support
  • Transitions Support
  • Loading Indicators component
  • Talk about this on Discord

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement