Radio Button Selection

The Radio Button Selection displays radio buttons for choosing one option from multiple choices, providing better user experience than dropdowns when you have 2-5 options. Can include images for visual selection.

desc - Display radio buttons for selecting one option from 2-5 choices with optional images.

Description

The Radio Button Selection component displays radio buttons that allow customers to select one option from multiple mutually exclusive choices (2-5 options recommended). Unlike dropdowns where options are hidden until clicked, radio buttons show all options simultaneously, making them ideal for short lists where customers benefit from seeing all choices at once. The component supports optional images for each option, making it perfect for visual selections like gift wrap styles, delivery methods with icons, or product variants with preview images.

Ideal Scenarios

• 2-5 options: Perfect range for radio button visibility and usability
• Visual selection: When images help customers choose (gift wrap styles, packaging options)
• Important choices: When you want all options visible without clicking
• Mutually exclusive: When customer should select exactly one option
• Quick comparison: When customers benefit from seeing all choices simultaneously
• Delivery methods: Standard/Express/Overnight with icons
• Service tiers: Basic/Standard/Premium with features listed
• Product variants: Size, color, style with visual previews

Not Recommended For

• 6+ options: Use Dropdown instead (too much vertical space with radio buttons)
• Binary yes/no: Use Checkbox for simple yes/no choices
• Multiple selections: Use multiple Checkboxes if customer can select more than one
• Date selection: Use Date Picker for calendar dates
• Free-text input: Use Text Input Field

Display Rules

Supports advanced display rules for conditional rendering. See Display Rules System documentation for details.

Radio Buttons vs Dropdown: When to Choose Which

Configuration Options

With Images

Add visual previews for each option:

Use when:
- Gift wrap styles
- Packaging designs
- Product variations
- Visual customization options

Benefits:
✅ Customers see exactly what they're choosing
✅ Higher engagement and conversion
✅ Reduces confusion and returns
✅ Professional presentation

Example: Gift Wrap Selection

Option 1: [Image: Blue wrap] "Classic Blue"
Option 2: [Image: Red wrap] "Holiday Red"
Option 3: [Image: Gold wrap] "Premium Gold"

Text-Only

Simple radio buttons with labels:

Use when:
- Options are self-explanatory
- No visual component needed
- Speed/simplicity preferred
- Mobile-optimized layout

Benefits:
✅ Faster loading
✅ Cleaner interface
✅ Better for text-based choices

Example: Delivery Speed

○ Standard Shipping (3-5 days) - Free
○ Express Shipping (1-2 days) - $15
○ Overnight Shipping (Next day) - $35

Display Layout

Vertical Layout (Stacked)

• Appearance: Options stacked vertically, one per line
• Best For:
  • Options with longer text
  • Options with descriptions
  • Options with images
  • 3-5 options
  • Mobile-friendly (easy to tap)
• Space: Takes more vertical space
• Example Use: Gift wrap styles with images and descriptions

Horizontal Layout (Inline)

• Appearance: Options displayed in a row, side by side
• Best For:
  • Short option labels (1-2 words)
  • 2-3 options only
  • Compact presentation
  • Simple selections (Size: S M L)
• Space: Compact, single line
• Mobile Consideration: May wrap on small screens
• Example Use: T-shirt sizes (S, M, L, XL)

Grid Layout (with Images)

• Appearance: Options in a grid with images above or beside radio buttons
• Best For:
  • Visual selections
  • Equal-sized options
  • 4-6 options (though 4 is safer)
  • Product variants
• Space: Efficient use of space
• Example Use: Gift wrap designs, packaging styles, font choices

Common Use Cases

Packaging Option

Label: "Choose Packaging"
Options:
○ Standard Box - Free
● Gift Box - Includes tissue paper ($5)
○ Luxury Box - Premium presentation ($15)

Default: Gift Box
Required: Yes
Layout: Vertical

Storage Options

Selected option can be stored as:

1. Order Attributes: "delivery_method": "Express Shipping"
2. Order Notes: "Customer selected Express Shipping (1-2 days)"
3. Metafields: Structured data for programmatic use

See Input Components Guide for detailed storage information and how to access collected data.