---
title: Radio Field in Fluent Forms
description: "The **Radio Field** in **Fluent Forms** allows users to select a **single option** from a predefined list. It’s perfect for **multiple-choice questions, surveys, and single-option selections**. This article will guide you through adding the **Radio Field**to your WordPress Site's Fluent…"
url: "https://fluentforms.com/docs/radio-field-in-fluent-forms/"
updated: "2025-06-03"
category: Field Types / General Fields
---

# Radio Field in Fluent Forms

The **Radio Field** in **Fluent Forms** allows users to select a **single option** from a predefined list. It’s perfect for **multiple-choice questions, surveys, and single-option selections**.

This article will guide you through adding the **Radio Field**to your WordPress Site's Fluent Forms.

[How to add Radio Button in WordPress | WP Fluent Forms](https://www.youtube.com/embed/fdMzDnwAa2w?feature=oembed)

## Adding Radio Field

To learn how to add the radio field to the Fluent Forms, follow the steps with the screenshots below –

First, go tothe**Forms**section from the **Fluent Forms Navbar,**chooseadesired**Form,**and click the **Edit** icon to open the **Editor** page of that form.

> If you do not have any existing forms, read [Create a Form from Scratch](https://fluentforms.com/docs/how-to-create-a-form-with-fluent-forms/) or [Create a Form using Templates](https://fluentforms.com/docs/using-and-customizing-pre-built-quick-forms-in-fluent-forms/) documentation to create a new one. 

![Editor Form 01 scaled 49054](https://fluentforms.com/wp-content/uploads/2025/02/Editor-Form-01-scaled.webp)

Once on the **Editor** page, click the **Plus** **Icon** in your form editor and open the **General Fields** module. The **General Fields**option is also in the right sidebar under the **Input** **Fields** tab. 

Now, select the desired **Radio Field**by clicking or **drag and drop** it into your editor.

![new 10 scaled 49054](https://fluentforms.com/wp-content/uploads/2025/02/new-10-scaled.webp)

## Customizing the Radio Field

After adding the field, customize it. **Hover over the field** and click the **Pencil Icon** to open the **Input Customization** tab. It will take you to the **Input Customization** tab on the right side and offer the following options for customizing the field. 

- Radio Field Options
- Advanced Options

![Input customization 03 8 scaled 49054](https://fluentforms.com/wp-content/uploads/2025/02/Input-customization-03-8-scaled.webp)

### Radio Field Options

You will find various settings options for customizing the field. Located in the **Input Customization Tab**, these options allow you to configure essential aspects of the**Radio Field.**

**All the Settings under the Radio Field mentioned above are briefly explained below – **

**A. Element Label:**This is the field title the users will see when filling out the **Radio**field in a form. You can enter any text here to help users understand the purpose of the field.

**B. Label Placement:** This option allows you to determine the position of the label title where the user will see it. The available options are **Top**, **Left**, **Right**, and **Default**. All of those are self-explanatory except the **Default**. If you select the **Default** option, it will represent your global label placement settings.

**C. Admin Field Label:** The admin field label is a field title displayed only to admin users. You can configure this option to show a different field label for your admin users when they view the form submissions. 

**D. Options:**Define the dropdown options:

- Create Options: Add the items for users to choose from.
- Set Default Options: Checkmark an option to set it as the default selection.
- Show Values: Display values for admin ease during submissions.
- Rearrange Options: Drag and drop options to reorder them.
- Add/Delete Options: Use the **Plus** icon to add new options or insert options between existing ones.

**E. Show & Calc Value:**Users will get **Show** and **Calc** Values options. You may display your data and perform calculations using Show Values and Calc Values.

Also, you can add photos by clicking on the **Photo**option for the field.

**F. Bulk Edit/Predefined Data Sets:** You can choose from a predefined data set for the dropdown field, so you don’t have to add each item manually.

You can also save time by importing predefined datasets instead of manually adding each option.  (This is useful for dropdowns like countries or states.)

**G. Shuffle the available options:**  You can enable the shuffle of your dropdown list or select field options so that every user sees a randomized option.

**H. Required:** Choose the appropriate option from here to determine whether the field should be empty when the user submits your form. 

![Basic options 04 8 scaled 49054](https://fluentforms.com/wp-content/uploads/2025/02/Basic-options-04-8-scaled.webp)

### Advanced Options

Advanced settings allow further customization to meet specific use cases. All the **Settings** under the **Advanced Options**tab mentioned in the screenshot are briefly explained below –

**A. Dynamic Default Value:** Using our shortcodes, you can manually set any fixed value in your field and pre-fill your input field dynamically. Read this [article](https://fluentforms.com/docs/dynamic-default-value-in-fluent-forms/) to better understand Dynamic Default values[.](https://wpmanageninja.com/docs/fluent-form/miscellaneous/default-value-in-wp-fluent-forms/)

**B. Container Class:** Use this option to add your custom CSS classes to the field’s wrapper.

**C. Element Class:**Add custom CSS classes to the input field.

**D. Help Message:**This option allows you to guide your user thoroughly. Add your text here, which will be shown as a help message to the user.

**E. Name Attribute:** The input field’s name attribute is the HTML equivalent of the same name. You don’t need to modify this.

**F. Layout:**Choose a layout for the options. Available layouts include vertical, horizontal, or grid style.

**G. Conditional Logic:** This option allows you to create specific rules to dynamically hide/show the input field to function conditionally based on your submission values according to your set of conditional logics. To learn more, read this [Documentation](https://fluentforms.com/docs/set-up-forms-with-conditional-logic-in-fluent-forms/). 

![Advanced option 05 1 49054](https://fluentforms.com/wp-content/uploads/2025/02/Advanced-option-05-1-1024x439.webp)

## Embedding the Form on Your Website

Once customization is complete, click the **Save** **Form** button to save all your changes. Click the **Preview & Design**buttonin the middle to see the form preview.

To integrate and display the form on a specific page or post, **copy** the **Shortcode** from the top right side and **paste** it into your desired **Page or Post**. 

![Save Form 06 9 scaled 49054](https://fluentforms.com/wp-content/uploads/2025/02/Save-Form-06-9-scaled.webp)

## Preview of Radio Button Field

Here is the preview of the added **Radio Button** field under the Form. 

![preview 07 4 49054](https://fluentforms.com/wp-content/uploads/2025/02/preview-07-4.webp)

### Image Button Layout

First, enable the **Photo** Option from your radio field’s options. Then,**Upload** images for each option in the **Photo** setting.

![Photo 08 1 scaled 49054](https://fluentforms.com/wp-content/uploads/2025/02/Photo-08-1-scaled.webp)

After that, Customize the **Layout**. Now, navigate **Advanced Options** and select the desired **Button Layout** from the dropdown menu.

![button layout 09 scaled 49054](https://fluentforms.com/wp-content/uploads/2025/02/button-layout-09-scaled.webp)

Once configured, the radio button field will display with clickable image options.

![button style preview 10 49054](https://fluentforms.com/wp-content/uploads/2025/02/button-style-preview-10.webp)

**Congratulations!** Your **Radio Button Field** is now ready for use, with **custom layouts, images, and logic settings**.

If you have any further questions, concerns, or suggestions, please do not hesitate to contact our [support team](https://wpmanageninja.com/support-tickets/?utm_source=wpmn&utm_medium=home&utm_campaign=site#/). Thank you.