Radio & Checkbox Fields
Create beautiful radio button and checkbox fields with images, custom pricing, and advanced layouts for product options and add-ons.
Radio Button Fields
Radio buttons allow customers to select exactly one option from a list. Perfect for sizes, colors, product variations, and mutually exclusive choices.
When to Use Radio Buttons
- Product Sizes: Small, Medium, Large, X-Large
- Color Choices: Red, Blue, Green with color swatches
- Shipping Methods: Standard, Express, Overnight
- Material Options: Wood, Metal, Plastic with different prices
- Service Tiers: Basic, Professional, Enterprise
Display Layouts
Vertical List
Best for 2-6 options
Horizontal Grid
Best for 2-4 options
Image Cards
Best for visual choices
Image Radio Buttons
Add product images, color swatches, or icons to radio options for visual selection.
Image Configuration
Image Size Options
- • Thumbnail (50×50px)
- • Small (100×100px)
- • Medium (150×150px)
- • Large (200×200px)
- • Custom dimensions
Visual Features
- ✓ Border on selection
- ✓ Hover effects
- ✓ Checkmark overlay
- ✓ Image descriptions
- ✓ Tooltips with details
Pricing with Radio Buttons
Each radio option can have its own price that replaces or adds to the base product price:
Replace Base Price
Option price becomes the total product price.
Add to Base Price
Option price adds to the base product price.
Checkbox Fields
Checkboxes allow customers to select zero, one, or multiple options. Ideal for add-ons, accessories, and optional features.
When to Use Checkboxes
- Product Add-ons: Gift wrapping, extended warranty, accessories
- Optional Features: Engraving, customization, special packaging
- Multiple Accessories: Cables, batteries, cases that can be combined
- Service Extras: Priority support, installation, training
- Terms & Agreements: Accept terms, newsletter signup
Checkbox Configuration
Selection Rules
- ✓ Min Selections: Require at least X choices
- ✓ Max Selections: Limit to Y choices
- ✓ Default Checked: Pre-select options
- ✓ Required: Force at least one selection
Pricing Options
- ✓ Per-Item Price: Each checkbox adds its own price
- ✓ Quantity Support: Allow quantity per checkbox
- ✓ Price Display: Show/hide prices on options
- ✓ Total Calculation: Automatic sum of selections
Checkbox Pricing Example
Product Add-ons Scenario
Image Checkboxes
Just like radio buttons, checkboxes can display images for visual product selection:
Example: Computer Accessories
Advanced Features
Conditional Pricing
Combine with conditional logic to show different prices based on other selections:
Example: Conditional Discount
If customer selects "Premium Plan" (radio), show discounted prices on add-on checkboxes:
- • Standard customers: Training +$200
- • Premium customers: Training +$150 (25% off)
Dependent Options
Show/hide checkbox options based on radio button selection:
Example: Product-Specific Add-ons
Only show relevant checkboxes based on product type:
- • If "Laptop" selected → Show: Mouse, Bag, Warranty
- • If "Desktop" selected → Show: Monitor, Speakers, Keyboard
Best Practices
💡 Tips for Better Selection Fields
Master Dynamic Pricing
Learn how to create complex pricing logic with Smart Pricing
Explore Smart Pricing →