Radio Groups

Seamless radio grouping.

Radio groups in Superform allow you to create sets of radio buttons that function together, enhancing form interactivity and validation.

To ensure they work as intended, all radio buttons in a group must share the same name attribute. This not only groups the buttons but also makes their values accessible for logic, validation and variables.

---

Setup

Group Definition:

• Use the name attribute to group radio buttons. All radio buttons in the group should share the same name value.

Group Behaviour:

• All radio buttons with the same name attribute are considered part of the same group, ensuring only one can be selected at a time.

• Apply navigation attributes (like sf-goto, sf-logic, etc.) to the container of the radio buttons for seamless navigation.

• If one radio button is required, all buttons in the same group are required. There's no need to set required on each radio button.

Key Attributes

• name: Defines the group name for radio buttons to function as a group.

• sf-goto: Adds navigation functionality to the radio group.

HTML Example

index.html

<!-- Radio Group Container with Navigation -->
<div sf-goto="next">
  <label>
    <input type="radio" name="subscription" value="basic"> Basic Plan
  </label>
  <label>
    <input type="radio" name="subscription" value="premium"> Premium Plan
  </label>
</div>

Webflow Example

All three options belong to the group with a single sf-goto = step-pricing.

Using Variables with Radio Groups

To compare or use the values of radio buttons in your logic or validation, reference the name attribute in your expressions.

index.html

<!-- Form Container -->
<form sf="myForm">
    <!-- Step 1 with Radio Group -->
    <div sf-step="step-1" class="radiogroup" sf-goto="next">
        <label>
            <input type="radio" name="plan" value="basic"> Basic Plan
        </label>
        <label>
            <input type="radio" name="plan" value="premium"> Premium Plan
        </label>
    </div>
    <!-- Step 2 -->
    <div sf-step="step-2">
        <!-- Reactively Display Content Based on Selected Plan -->
        <div sf-react="visibility($f.plan === 'basic')">You selected the Basic Plan.</div>
        <div sf-react="visibility($f.plan === 'premium')">You selected the Premium Plan.</div>
    </div>
</form>

Pro Tips

• Always ensure all radio buttons in a group have the same name to maintain group behavior.

• Combine sf-goto and sf-logic on the group container for advanced navigation scenarios, avoiding the need for individual sf-goto directives on each radio button.

• To access the selected value in your logic or reactivity, use the name attribute in your expressions to extract the value from a group.