How do I add a radio button in Webflow?

Put each radio button inside the form

Radio buttons let a visitor select a single option from a set. Webflow says checkboxes, radio buttons, and select inputs can only be placed inside a form block. A button that lands beside the form is not part of that form.

Open the Add panel. Scroll to Forms. Drag Radio button into the Form wrapper, on the canvas or in the Navigator. The wrapper is the element that already holds the inputs and the submit button. If the button lands outside that wrapper, drag it in before you change settings.

Add one radio button for each option. Three choices means three radio buttons inside the same form. Keep the field label on each one. The forms article says field labels help people who use screen readers, so do not delete them. The label is the text on the canvas. It is not automatically the value stored in the submission.

Example: a contact form asks how you should reply. Drag in three radio buttons and set the labels to Email, Phone, and Either. The next section ties those three together so the visitor can pick only one.

Use one group name for the whole set

Select a radio button. Open Radio button field settings in the Element settings panel. You can also double-click the element, or click the settings icon beside its label.

Group name sets the name of the group. Webflow's example is Favorite color on every color choice in that question. Type the same Group name on every button that belongs to the same question. Reply method on Email, Phone, and Either makes them one question. A different Group name starts a different question, and the visitor can select one option from each.

Use a Group name you will recognize in the submission data.

Example: the same form also asks for a project size. Those buttons need their own Group name, such as Project size, not Reply method. If you reuse Reply method, the size buttons join the reply question. The visitor can then select only one button across both questions.

Set the choice value, then Required

Choice value sets the value of that button in the submission. Webflow's example sets Red as the choice value for the button whose canvas label is Red. The help article says the choice value is not the same as the on-canvas label. You can show Email me on the canvas and store email as the choice value. If you want them to match, type the same words in both places.

Required sets the radio button as a required form field. Only one radio button in a group needs to be set as Required for the whole group to be required. Turn Required on for one button in Reply method. The visitor must pick one option in that group before the form can submit. You do not need Required on the other two.

There is an important exception. If you set a radio button as Required but do not give the group a Group name, Webflow says that specific radio button has to be selected before the form can be submitted. An empty Group name does not turn the set into a pick-one question. It makes that one button mandatory. Fill the Group name on every button in the set first, then turn Required on for a single button.

Style the selected state and keep the focus shadow

Style, in the same Radio button field settings, is Default or Custom. Default keeps the ordinary radio button. Custom lets you design the element in the Style panel. To go back, choose Default under Style.

After Custom is on, select the radio button on the canvas and open the States menu in the Selector. The checked state is available for radio buttons and checkboxes that have custom styling turned on in Element settings. That state is how the control looks when it has been selected. Set the fill or the border there. The resting look stays on None, the default state.

The help article says the focused state of radio buttons and checkboxes comes with a default blue shadow so people using arrow keys can see where they are in the form. Leave that shadow in place. A custom fill on the checked state does not replace a visible focus.

Custom is a setting on the element, not only a class. If you set custom styling and reuse the same class on another radio button, Webflow says to select Custom under Style on the new radio button. Copying the class without that setting leaves the new control on the default style.

Choose None in the States menu when you finish, or the canvas keeps showing the checked look.

Publish and read the submission

Publish the site, open the live page, and submit once with Email selected and a subject you can spot, such as Radio test. Then open Site settings, Forms, and find that test. The Group name should identify the question, and the choice value should show the answer you stored.

Send a second test with no button selected in that group. The form should not complete when Required is on for the group. If it does, Required is off, or the button you marked required has an empty Group name and the visitor selected a different button. Open Radio button field settings on each button and read Group name, Choice value, and Required before you rewrite the labels.

If the answers never appear, the radio buttons are outside the Form wrapper, or this page was not in the publish. Confirm each button is inside the wrapper, and publish again. If two questions behave as one, give the second question its own Group name. If the custom dot looks plain on the live site, set Style to Custom on that button and publish once more. Keep the focus shadow.