Radio Button Field
The Radio Button field is a simple, single-selection input option that allows customers to choose exactly one option from a predefined list on your product pages. It’s perfect for mutually exclusive choices like sizes, colors, materials, or any scenario where customers must select one—and only one—option from available alternatives.
Why Use a Radio Button Field?
- Single Selection: Ensures customers pick exactly one option from the list
- Clear Visual Choice: All options are visible at once for easy comparison
- Mutually Exclusive Options: Perfect when choices cannot be combined
- Flexible Pricing: Set fixed prices or percentage-based pricing for each option
- Simple & Clean: Easy-to-use interface without unnecessary complexity
- Better UX: More intuitive than dropdowns when options are limited (2-7 choices)
When to Use Radio Buttons vs Other Fields
| Use Radio Buttons When | Use Dropdown When | Use Checkboxes When |
|---|---|---|
| 2-7 options available | 8+ options available | Multiple selections allowed |
| Options need visibility | Space is limited | Options can be combined |
| Visual comparison needed | Long option labels | Independent choices |
| Quick selection required | Hierarchical options | Add-on features |
Price Types
Radio button fields support two pricing methods to fit different business needs:
1. Fixed Price
This is perfect for options with different flat prices. Each option has its own fixed price that gets added to the product when selected.
Example – T-Shirt Sizes:
| Option Label | Price Type | Price |
|---|---|---|
| Small | Fixed | 0.00 |
| Medium | Fixed | 0.00 |
| Large | Fixed | 2.00 |
| X-Large | Fixed | 4.00 |
| 2X-Large | Fixed | 6.00 |
Customer Experience:
Base T-Shirt price: $15.00
Customer selects “X-Large”
Final price: $15.00 + $4.00 = $19.00
2. Percentage of Product Price
Each option’s price is calculated as a percentage of the product’s base price. This is ideal when the addon value should scale with the product cost.
Example – Material Upgrade:
| Option Label | Price Type | Percentage | On $100 Product |
|---|---|---|---|
| Standard Cotton | Percentage | 0% | 0.00 |
| Premium Cotton | Percentage | 10% | 10.00 |
| Organic Cotton | Percentage | 20% | 20.00 |
| Silk Blend | Percentage | 35% | 35.00 |
Customer Experience:
Base product price: $100.00
Customer selects “Organic Cotton” (20%)
Calculated price: $100.00 × 20% = $20.00
Final price: $100.00 + $20.00 = $120.00
Note: If the same product was $50, selecting “Organic Cotton” would only add $10.00 ($50 × 20%).
Real-World Examples
Example 1: Pizza Size Selection
Scenario: A pizza shop wants customers to choose their pizza size.
Configuration:
- Field Type: Radio Button
- Field Label: “Select Your Size”
- Required: Yes
Options Setup:
| Option Label | Price Type | Price |
|---|---|---|
| Personal (8″) | Fixed | 0.00 |
| Medium (12″) | Fixed | 4.00 |
| Large (14″) | Fixed | 7.00 |
| Family (18″) | Fixed | 12.00 |
Customer Experience:
- Base pizza price: $15.00
- Customer selects “Large (14″)”
- Final price: $15.00 + $7.00 = $22.00
Scenario: A jewelry store offers rings in different metals with percentage-based pricing.
Configuration:
- Field Type: Radio Button
- Field Label: “Choose Metal Type”
- Required: Yes
Options Setup:
| Option Label | Percentage | On $500 Ring |
|---|---|---|
| Sterling Silver | 0% | 0.00 |
| 10K Gold | 50% | 250.00 |
| 14K Gold | 80% | 400.00 |
| 18K Gold | 120% | 600.00 |
| Platinum | 200% | 1,000.00 |
Customer Experience:
- Base ring price: $500.00
- Customer selects “14K Gold”
- Final price: $500.00 + $400.00 = $900.00
Example 2: Jewelry Metal Selection
Example 3: Print Quality Options
Scenario: A print shop offers different quality levels for photo prints.
Configuration:
- Field Type: Radio Button
- Field Label: “Print Quality”
- Required: Yes
Options Setup:
| Option Label | Price Type | Price |
|---|---|---|
| Standard Print | Fixed | 0.00 |
| Enhanced Print | Fixed | 5.00 |
| Professional Print | Fixed | 12.00 |
| Museum Grade Print | Fixed | 25.00 |
Customer Experience:
- Base print price: $20.00
- Customer selects “Professional”
- Final price: $20.00 + $12.00 = $32.00
Scenario: An e-commerce store offers multiple shipping options.
Configuration:
- Field Type: Radio Button
- Field Label: “Shipping Method”
- Required: Yes
- Default Selected: “Standard Shipping”
Options Setup:
| Option Label | Price Type | Price |
|---|---|---|
| Standard Shipping (5-7 days) | Fixed | 0.00 |
| Express Shipping (2-3 days) | Fixed | 9.99 |
| Next Day Delivery | Fixed | 24.99 |
| Same Day Delivery | Fixed | 39.99 |
Example 4: Shipping Speed Selection
Example 5: Gift Wrapping Options
Scenario: A gift shop offers different wrapping styles.
Configuration:
- Field Type: Radio Button
- Field Label: “Gift Wrapping”
- Required: No
Options Setup:
| Option Label | Price Type | Price |
|---|---|---|
| No Wrapping | Fixed | 0.00 |
| Basic Wrapping | Fixed | 3.00 |
| Premium Gift Box | Fixed | 8.00 |
| Luxury Presentation | Fixed | 15.00 |
Scenario: A software company offers subscription plans with tiered pricing.
Configuration:
- Field Type: Radio Button
- Field Label: “Subscription Plan”
- Required: Yes
Options Setup:
| Option Label | Price Type | Price |
|---|---|---|
| Monthly Plan | Fixed | 29.00 |
| Quarterly Plan (Save 14%) | Fixed | 75.00 |
| Annual Plan (Save 28%) | Fixed | 249.00 |
| Lifetime Access | Fixed | 699.00 |
Example 6: Subscription Duration
Example 7: Furniture Finish Selection
Scenario: A furniture store offers different finish options for wooden furniture.
Configuration:
- Field Type: Radio Button
- Field Label: “Wood Finish”
- Required: Yes
Options Setup:
| Option Label | Price Type | Price |
|---|---|---|
| Natural Oak | Fixed | 0.00 |
| Dark Walnut | Fixed | 25.00 |
| Espresso | Fixed | 25.00 |
| Weathered Grey | Fixed | 35.00 |
| Custom Stain | Fixed | 75.00 |
Scenario: An electronics store offers extended warranty plans.
Configuration:
- Field Type: Radio Button
- Field Label: “Protection Plan”
- Required: No
Options Setup (Percentage-based on product price):
| Option Label | Percentage | On $500 TV |
|---|---|---|
| No Warranty | 0% | 0.00 |
| 1-Year Extended | 8% | 40.00 |
| 2-Year Extended | 12% | 60.00 |
| 3-Year Extended + Accidental | 18% | 90.00 |
Example 8: Warranty Options
Configuration Options
Basic Settings
| Setting | Description | Example |
|---|---|---|
| Field Label | Main label shown to customers | “Select Size” |
| Subtitle | Additional helper text | “Choose the size that fits you best” |
| Required | Whether selection is mandatory | Yes/No |
| Default Value | Pre-selected option | “Medium” |
| CSS Class | Custom styling class | “size-selector” |
Repeater Options (For Each Radio Option)
| Setting | Description |
|---|---|
| Option Label | The text displayed for each radio button option |
| Price Type | Choose between “Fixed” or “Percentage of Product Price” |
| Price | Enter the price value (amount for Fixed, percentage number for Percentage ( EX: 10 )) |
Advanced Settings (Premium Features)
| Setting | Purpose |
|---|---|
| Enable Quantity | Add quantity input for the selected radio option |
| Product Quantity | Link addon quantity to main product quantity |
| Default Quantity | Set initial quantity value for the option |
| Min/Max Quantity | Control quantity limits for the option |
| Conditional Logic | Show/hide radio field based on other field selections |
| Hide in Cart | Hide addon details from cart display |
| Hide Price in Cart | Show option without displaying price in cart |
What Your Customers See
When a customer interacts with your radio button field:
- All options are visible – Unlike dropdowns, customers see every choice immediately
- Clear selection indicator – The selected option shows a filled radio circle
- Price updates instantly – Product price changes as they select different options
- Only one selection allowed – Clicking a new option automatically deselects the previous one
- Required validation – If mandatory, customers must select an option before adding to cart
- Cart display – Their selection and any price adjustment appear in the cart
Tips for Creating Effective Radio Button Fields
Do’s ✓
- Keep options concise – Use short, clear labels (e.g., “Large” not “Large Size Option”)
- Order logically – Arrange by size, price, or popularity
- Set smart defaults – The first option is automatically selected by default
- Show price differences clearly – Help customers understand the value of each option
- Use descriptive labels – Include relevant details in the option label text
- Limit to 7 options – More than 7? Consider a dropdown (select) field instead
Don’ts ✗
- Don’t use for multi-select – Use checkboxes if customers can choose multiple options
- Don’t hide important options – All radio options should be visible
- Don’t use vague labels – “Option 1, Option 2” doesn’t help customers decide
- Don’t forget mobile – Test that options are easily tappable on small screens
Common Use Cases Summary
| Industry | Use Case | Example Options |
|---|---|---|
| Apparel | Size selection | XS, S, M, L, XL, XXL |
| Food & Beverage | Portion size | Small, Medium, Large |
| Electronics | Storage capacity | 64GB, 128GB, 256GB, 512GB |
| Services | Service tier | Basic, Standard, Premium |
| Printing | Paper type | Matte, Glossy, Canvas |
| Furniture | Material | Fabric, Leather, Velvet |
| Software | License type | Personal, Business, Enterprise |
| Events | Ticket type | General, VIP, Premium |
Troubleshooting
Issue: Price not updating when option is selected
Solution: Ensure “Enable Price” is turned on and price values are entered correctly.
Issue: Customer can’t proceed without selecting
Solution: Either set “Required” to No, or add a default selected option.
Issue: Options appear cramped on mobile
Solution: Radio buttons display vertically by default. Ensure proper spacing in your theme’s CSS.
Issue: First option is always selected
Solution: This is expected behavior. The first option is automatically selected by default. If you need no default selection, consider using a dropdown field instead.
Summary
Radio button fields are essential for any product that requires customers to make a single choice from multiple options. They provide:
- Clear visibility – All available options are visible at once
- Simple interaction – One-click selection with visual feedback
- Flexible pricing – Support for both fixed and percentage-based pricing
- Mutually exclusive selection – Only one option can be selected at a time
- Required validation – Ensure customers make selections before checkout
- Quantity support – Add quantity fields for selected options (Premium)
By implementing radio buttons thoughtfully, you create a streamlined shopping experience that guides customers through their choices while maintaining accurate pricing for your business.
Need help setting up radio button fields? Contact our support team