Radio Field

Radio buttons let users select exactly one option from a visible list. All options are displayed at once.

When to use

Single selection from few options (2-5)
When users should see all options at a glance
Yes/No or similar binary choices
When comparison between options is important

For many options (5+), use Select instead. For multiple selections, use Checkbox.

Settings

Label

The question or prompt.

Example: "Preferred contact method", "How urgent is this?", "Do you agree to the terms?"

Description

Additional context if needed.

Required

When enabled, one option must be selected before submission.

Options

Adding options

Each line becomes one radio button:

Email
Phone
No preference

Value vs. label

Use different values for storage:

email|Email
phone|Phone Call
none|No preference

Default selection

Pre-select an option:

Default Value: email

Layout

Vertical (default)

Options stacked vertically:

○ Email
○ Phone
○ No preference

Best for longer option labels.

Horizontal

Options in a row:

○ Email  ○ Phone  ○ No preference

Best for short labels (Yes/No, ratings). Set via Layout: Horizontal.

Horizontal layout wraps on narrow screens to maintain usability.

Examples

Contact preference

Label: Preferred contact method
Required: Yes
Layout: Vertical
Options:
  email|Email
  phone|Phone
  either|No preference
Default Value: email

Priority level

Label: How urgent is this?
Required: Yes
Layout: Horizontal
Options:
  low|Low
  medium|Medium
  high|High

Yes/No question

Label: Have you used our product before?
Required: Yes
Layout: Horizontal
Options:
  yes|Yes
  no|No

Agreement

Label: Terms and Conditions
Required: Yes
Options:
  agree|I agree to the terms and conditions
Description: Please read our [terms](/terms) before agreeing.

For simple agreements, consider using a Checkbox instead, which is the more common UX pattern.

Conditional logic (Pro)

Radio fields work great with conditional logic. Show or hide fields based on selection:

Example: Show a phone number field when "Phone" is selected:

Condition: contact_method is "phone"
Action: Show phone_number field

Styling

<div class="fodo-field fodo-field-radio">
  <label class="fodo-label">
    Preferred contact method
    <span class="fodo-required">*</span>
  </label>
  <div class="fodo-radio-group">
    <label class="fodo-radio-option">
      <input type="radio" name="fields[abc123]" value="email">
      <span class="fodo-radio-label">Email</span>
    </label>
    <label class="fodo-radio-option">
      <input type="radio" name="fields[abc123]" value="phone">
      <span class="fodo-radio-label">Phone</span>
    </label>
  </div>
</div>

Custom radio styling

/* Hide default radio */
.fodo-radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* Custom radio appearance */
.fodo-radio-option .fodo-radio-label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* Selected state */
.fodo-radio-option input:checked + .fodo-radio-label::before {
  border-color: #0066cc;
  background: radial-gradient(circle, #0066cc 40%, transparent 40%);
}

Radio Field

On this page