> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.optis.me/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Radio Button

1. [OPTIS Product Options, Variant](/product-options)
2. [20 Option Types](/product-options/20-option-types)
3. [Choice list](/product-options/20-option-types/choice-list)

# Radio Button

A **Radio Button** shows a small circle next to each value; customers can pick only one. Selecting a new value automatically deselects the previous one.

✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/radio-button?variant=51025988550934)

![](https://storage.crisp.chat/users/helpdesk/website/-/8/6/b/8/86b84078fb066000/15ae1861-a245-4cb2-9b5f-a460dd_jk6hbe.png)

## When to use a Radio Button

* **Product variations** - one size, color, or material per product.
* **Shipping methods** - standard, express, or same-day delivery.
* **Surveys and forms** - a single yes/no question or a pick-one question.

## How to add a Radio Button option
### Step 1: Add the option

Open **1. Add options**, click **Add option**, tick **Radio button** under **Choice list** on the **New options** tab, then click **Add options**.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/a/f/b/cafba0acedb1c800/d1955255-929f-4271-b800-4ae26e_1czpuv6.png)

### Step 2: Name it and add values

Enter the **Label on product** (e.g., "Choose Scent") and add the **Option values** (e.g., Lavender, Vanilla, Eucalyptus). Tick **Required field** if customers must choose before checking out, or **Hide option label** to hide the label.

![](https://storage.crisp.chat/users/helpdesk/website/-/e/8/3/2/e832044e0550880/c7aea958-b6bb-4a8f-8a38-08ea8f_x6rtcz.png)

### Step 3: Save and test

Click **Save**, then open the product page on your store to check that the Radio Button works correctly.

![](https://storage.crisp.chat/users/helpdesk/website/-/2/a/0/2/2a022b47a86f1600/0fbd1723-16a1-462f-a745-d2c9fb_1916h2y.png)

## Option settings

Set only what you need - all of the settings below are optional. In the **Option values** table, click **Columns** to show **Add-on**, **Help text**, **SKU** or **Quantity** for each value:

* **Add-on** - charge extra for a value (**Extra fee**, Advanced plan and above) or link it to a Shopify variant (**Upsell product**, Platinum and above). See [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option).
* **SKU** - a SKU for that value. Advanced plan and above. See [How does Product Option SKU works?](/product-options/customize-design/how-does-product-option-sku-works).
* **Quantity** - let customers choose how many of that value they want. Platinum plan and above. See [How to Use the "Quantity" Feature for Options](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options).

![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/8/5/e485b48ae4227000/61a4abd9-1f8d-4ac6-bb7b-8ff423_1apii4f.png)

### Default value

Toggle **Default** for the value that should be pre-selected when the customer opens the product page. Available on the **Advanced** plan and above.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/a/c/f/aacfcacad6c60000/ac4f4fcf-6dbd-4521-9e0b-bcb0dd_17crg54.png)

### Help text

Add a short note explaining what to choose, shown as a **Tooltip**, **Below the option title**, **Beside the option title**, or **Below the option**. Available on the **Platinum** plan and above.

![](https://storage.crisp.chat/users/helpdesk/website/-/4/3/b/0/43b0461ec06ca800/58c15822-569b-49a3-81fc-b5cf60_1sadjag.png)

### Show or hide with Visibility (conditional logic)

Show or hide the Radio Button based on another option. Available on the **Advanced** plan and above. See [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics).

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FvbzdjV02iwjnvYf7VG2T%252Fimage.png%3Falt%3Dmedia%26token%3Dc46cb31c-f01f-48bd-8cd7-746bd443aa7d&width=768&dpr=3&quality=100&sign=ec229649477bb3a03530afe0c5ef1279&sv=3)

### Layout

In the **Display** tab: set **Option width** (**25%**, **33%**, **50%**, **67%**, **75%** or **100%**) to control how much horizontal space the option takes, and **Option value orientation** (**Horizontal** or **Vertical**) to lay the values out in a row or stack them.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FXQ8YNWZ2InQx4dWD1YVQ%252Fimage.png%3Falt%3Dmedia%26token%3Dc0fefc6b-ff01-4743-aa7f-2631b0c901fc&width=768&dpr=3&quality=100&sign=b3a5e4318503c319ea8f538db2d10a1f&sv=3)

## Related guides

* [Checkbox](/product-options/20-option-types/choice-list/checkbox)
* [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option)
* [How to Use the "Quantity" Feature for Options](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options)
* [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics)