Skip to main content
Version: Divi 5

Radio Buttons

Purpose​

The Radio field type renders radio buttons for a single choice from a list. Options can be defined manually or auto-detected (e.g. ACF). You can show images per option, use inline/grid layout, and style as buttons.

When to use​

  • Single selection from a fixed list (e.g. size, plan, rating).
  • When you prefer visible options over a dropdown (e.g. short lists).

Key settings​

  • Field — Field Type: radio, Field Title.
  • Radio — Radio Options (label/value/checked), Auto Detect, Exclude Options.
  • Choice field layout — Inline, full width, gap, grid columns, field style (default/button).
  • Radio / Checkbox image — Show images, image IDs, label position, max width, same height.
  • Validation — Required.

Top features to configure​

  • Field style (default vs button) — Button style is ideal for plan/option pickers.
  • Inline vs grid — Inline works for 2-3 options; grid is easier for larger sets.
  • Default checked option — Use carefully to avoid unintentionally pre-selecting user choices.
  • Auto-detect options — Pull option sets dynamically when values come from another source.
  • Image radios — Use visual cards when users choose by look (e.g. layouts, packages).

Validation behavior​

  • Required prevents submission until one option is selected.
  • Only one value is submitted, making radio fields safer for single-choice mapping.
  • Auto-detected options should be checked after source updates.

Common mistakes​

  • Using radio for multi-select requirements (use Checkboxes instead).
  • Leaving a default selection that unintentionally biases submissions.
  • Long option labels causing broken button/image layouts on small screens.

Verify it works​

  1. Submit without a selection (when required) and confirm validation.
  2. Submit with each option and verify saved value and notification output.
  3. Check option layout on desktop and mobile if button/image mode is enabled.

What's Next​