Conditional Branching Form Fields — Show/Hide Sections Based on Prior Answers

<form class="demo branch-form" id="branchForm">
  <fieldset class="f-group">
    <legend>Are you signing up as a business?</legend>
    <div class="radio-row">
      <label><input type="radio" name="accountType" value="personal" checked /> Personal</label>
      <label><input type="radio" name="accountType" value="business" /> Business</label>
    </div>
  </fieldset>

  <div class="branch-block" id="businessFields" hidden>
    <div class="f-row">
      <label for="companyName">Company name</label>
      <input type="text" id="companyName" name="companyName" placeholder="Acme Inc." />
    </div>
    <div class="f-row">
      <label for="teamSize">Team size</label>
      <select id="teamSize" name="teamSize">
        <option value="1-10">1–10</option>
        <option value="11-50">11–50</option>
        <option value="51+">51+</option>
      </select>
    </div>

    <fieldset class="f-group nested">
      <legend>Do you need an invoice?</legend>
      <div class="radio-row">
        <label><input type="radio" name="needsInvoice" value="yes" /> Yes</label>
        <label><input type="radio" name="needsInvoice" value="no" checked /> No</label>
      </div>
    </fieldset>

    <div class="branch-block nested" id="invoiceFields" hidden>
      <div class="f-row">
        <label for="vatId">VAT / Tax ID</label>
        <input type="text" id="vatId" name="vatId" placeholder="EU123456789" />
      </div>
      <div class="f-row">
        <label for="billingAddr">Billing address</label>
        <input type="text" id="billingAddr" name="billingAddr" placeholder="123 Main St, City" />
      </div>
    </div>
  </div>

  <button type="submit" class="submit-btn">Continue</button>
</form>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.branch-form { width: 400px; max-width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }

.f-group { border: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.f-group legend { font-size: 13px; font-weight: 700; color: #111827; padding: 0; margin-bottom: 2px; }
.radio-row { display: flex; gap: 16px; }
.radio-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; cursor: pointer; }
.radio-row input[type="radio"] { accent-color: #6366f1; }

.branch-block { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 12px; background: #f8fafc; border: 1px dashed #e2e8f0; animation: slideIn 0.22s ease; }
.branch-block.nested { background: #eef2ff; border-color: #c7d2fe; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.f-row { display: flex; flex-direction: column; gap: 5px; }
.f-row label { font-size: 12px; font-weight: 700; color: #334155; }
.f-row input, .f-row select { padding: 9px 11px; border: 1.5px solid #e2e8f0; border-radius: 9px; font-size: 13px; font-family: inherit; background: #fff; }
.f-row input:focus-visible, .f-row select:focus-visible { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }

.submit-btn { padding: 11px; border: none; border-radius: 10px; background: #4f46e5; color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.submit-btn:hover { background: #4338ca; }

const form = document.getElementById('branchForm');
const businessFields = document.getElementById('businessFields');
const invoiceFields = document.getElementById('invoiceFields');

// Every conditional block owns a "required-when-visible" set of fields.
// Rather than hardcoding required on the markup (which would block submission
// even while a section is hidden), required is toggled in lockstep with
// visibility so validation always matches what the user can actually see.
const businessRequiredFields = ['companyName'];
const invoiceRequiredFields = ['vatId', 'billingAddr'];

function setBlockVisible(block, requiredFieldIds, visible) {
  block.hidden = !visible;
  requiredFieldIds.forEach((id) => {
    const el = document.getElementById(id);
    if (!el) return;
    el.required = visible;
    if (!visible) el.value = ''; // clear hidden fields so stale data can't be submitted later
  });
}

function updateBusinessBranch() {
  const isBusiness = form.accountType.value === 'business';
  setBlockVisible(businessFields, businessRequiredFields, isBusiness);
  if (!isBusiness) {
    // Collapsing the parent branch must also collapse anything nested inside it,
    // otherwise a hidden parent could still leave an invoice section visible.
    updateInvoiceBranch();
  }
}

function updateInvoiceBranch() {
  const isBusiness = form.accountType.value === 'business';
  const wantsInvoice = form.needsInvoice.value === 'yes';
  setBlockVisible(invoiceFields, invoiceRequiredFields, isBusiness && wantsInvoice);
}

form.accountType.forEach((radio) => radio.addEventListener('change', updateBusinessBranch));
form.needsInvoice.forEach((radio) => radio.addEventListener('change', updateInvoiceBranch));

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(form).entries());
  alert('Submitted:\n' + JSON.stringify(data, null, 2));
});

updateBusinessBranch();