> For the complete documentation index, see [llms.txt](https://deltaclan.gitbook.io/superform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://deltaclan.gitbook.io/superform/essentials/radio-groups.md).

# 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="/files/G18VdsIbP056AINrrcr1" 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://deltaclan.gitbook.io/superform/essentials/radio-groups.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.