# Radio Groups

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**

{% code title="index.html" %}

```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>
```

{% endcode %}

#### Webflow Example

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FqGTTmchRfgqiSfxe2hIt%2FCleanShot%202024-07-16%20at%2000.19.37%402x.png?alt=media&#x26;token=b1406874-02dc-4fc4-acff-a239addf3507" alt=""><figcaption><p>All three options belong to the group with a single <code>sf-goto = step-pricing</code>.</p></figcaption></figure>

#### 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.

{% code title="index.html" %}

```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>


```

{% endcode %}

{% hint style="info" %}
**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.

{% endhint %}