# Radio Select

The **Radio Select** element allows you to add radio button options to choose only one by filling in the fields given.

## Element Tab

The Radio Select element has the following attributes in the Element tab:

<figure><img src="/files/tkjgfV6Gd2lS5Oozfe58" alt=""><figcaption></figcaption></figure>

* **Element Name** - title of the field.
* **Description** - brief description of the field.
* **Element width -** set how much horizontal space the element occupies in the form relative to the width of the calculator in 100% scale. You will see the changes in real time.
* **Element Columns** - Select how many parts the width of the element should be divided to display the options. This helps organize radio options into multiple columns. It is especially useful when there are many options, making them easier for users to view and select. If 3 is selected, all the options will be displayed in three rows.
* **Options**  - under this section, you can add/remove/reorder options of the radio and assign numerical values to them.&#x20;
  * **Option Label** - Add options for users to choose from.
  * **Option Value** - Add numeric values that will be used in total calculations when an option is selected.
  * **Hint** - a small description of the option can be viewed by hovering the <i class="fa-circle-info">:circle-info:</i> icon next to it.
  * **Add Option** - Adds a new option to the list.
* **Default Value** - Select the option that is preselected when the form loads.
* **Type of Label in Total** - Choose how the selected option will appear in the Summary (Total) section.
  * **Show Value** - Displays the values of the Radio options.
  * **Label Only(No calculation)** - Displays the label of the Radio options, and the value will not be included in Total Calculations. It is useful when the field is used to create [conditions](/cost-calculator-builder/conditional-system/introduction.md).
  * **Label Only(Calculation Value)** - Displays the label of the Radio options, and the value will be included in the total calculations.

{% tabs %}
{% tab title="Show Value" %}

<figure><img src="/files/inhKAPNIrBvAre2CEdBo" alt=""><figcaption></figcaption></figure>

**Show Value -** Displays the values of the **Radio** options.
{% endtab %}

{% tab title="Show Label without Value in Total" %}

<figure><img src="/files/3JRTRNQzP6CL7McTxggO" alt=""><figcaption></figcaption></figure>

**Show Label without Value in Total** - Displays the label of the **Radio** options, and the value will not be included in Total Calculations. It is useful when the field is used to create conditions.
{% endtab %}

{% tab title="Show Label with Value in Total" %}

<figure><img src="/files/plkv1vTt7VGgzjoLqQQL" alt=""><figcaption></figcaption></figure>

**Show Label with Value in Total** - Displays the label of the **Radio** options and the value will be included in Total Calculations.
{% endtab %}
{% endtabs %}

Example of a radio field with columns:

<figure><img src="/files/U0oTjay81evQO0nFMdSM" alt=""><figcaption><p>Radio Element organized in 3 columns, 100% width</p></figcaption></figure>

### Set Measurement Unit

This setting allows you to add a measuring unit (Ω, cm, kg, inch, etc.) to the field.

<figure><img src="/files/wACX37IEL9mp6ETLdFVe" alt=""><figcaption></figcaption></figure>

* **Unit Symbol** - enter the unit symbol&#x20;
* **Position** - select the position where the symbol should be displayed relative to the number
* **Thousands separator** - select the symbol to [separate thousands ](#user-content-fn-1)[^1]
* **Number of decimals** - indicate the number of decimals in the fractional part
* **Decimal separator** - select the symbol to separate the fractional part

## Variants Tab

The Variants tab is available in the Pro version of the plugin, and there you can adjust the appearance of the field:

<figure><img src="/files/sEqMXmdyIvb7LEKugceA" alt=""><figcaption></figcaption></figure>

**There are three available variants:**

{% tabs %}
{% tab title="Default" %}

<figure><img src="/files/gMPOVHTTYYebL0vm40e4" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Box" %}

<figure><img src="/files/zor2Eyid3BiB9ce3EIEo" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Box with Radio Button" %}

<figure><img src="/files/XxvbAo4Hw81rBAF1yaPf" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

The tab has one setting at the bottom:

* **Apply this radio style to all radio fields in this calculator** - When the option is enabled, the selected style will be applied to all radio elements in the calculator that are being edited.

## Settings Tab

The Radio element has the following attributes in the Settings tab:

<figure><img src="/files/zXlwT7JDByk9YxxlVA8j" alt=""><figcaption></figcaption></figure>

* **Required** - Defines whether the element will be required to be filled or not.
* **Round Value** - Enable if you want to round the value to the whole number in the total summary.
* **Hidden by Default** - The element will be hidden by default. You can make it visible using [**conditional system**](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/pages/OneKKwO4j2k65VfBcrvD#id-1.-hidden-by-default).
* **Calculate hidden by default** - If any case hides the element: via the **Hidden by Default** setting or hidden by some [**condition**](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/pages/OneKKwO4j2k65VfBcrvD#id-2.-calculate-hidden-by-default), the element's default value (if it is set) will be counted in the formula.
* **Show in Grand Total** - Disable if you want to hide the element in Grand Total.
* **Additional Classes** - Add [extra classes](/cost-calculator-builder/plugin-features/additional-classes.md) to the HTML elements to further style changes

{% tabs %}
{% tab title="Show in Grand Total enabled" %}

<figure><img src="/files/lWFLFHwjyW2W9mEI5THg" alt=""><figcaption></figcaption></figure>

The result of the **Radio Button** element will be displayed in the total summary.
{% endtab %}

{% tab title="Show in Grand Total disabled" %}

<figure><img src="/files/yrX2zE6VnaVY34lrcJJe" alt=""><figcaption></figcaption></figure>

The result of the **Radio Button** element will not be displayed in the total summary.
{% endtab %}
{% endtabs %}

[^1]: r.g 7, 000, 000 (seven millions)


---

# Agent Instructions: 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://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/radio-button.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.