Bootstrap Conditional Form Fields — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bscond-card">
    <div class="card-body p-4">
      <label class="form-label small fw-semibold">How do you plan to use this?</label>
      <select class="form-select mb-3" id="bscondType">
        <option value="">Select one...</option>
        <option value="personal">Personal</option>
        <option value="business">Business</option>
        <option value="nonprofit">Nonprofit</option>
      </select>

      <div class="bscond-group d-none" id="bscondBusinessFields">
        <label class="form-label small fw-semibold">Company name</label>
        <input type="text" class="form-control mb-2" id="bscondCompany">
        <label class="form-label small fw-semibold">Tax ID</label>
        <input type="text" class="form-control mb-3" id="bscondTaxId">
      </div>

      <div class="bscond-group d-none" id="bscondNonprofitFields">
        <label class="form-label small fw-semibold">Organization name</label>
        <input type="text" class="form-control mb-2" id="bscondOrgName">
        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" id="bscondRegistered">
          <label class="form-check-label small" for="bscondRegistered">We're a registered 501(c)(3)</label>
        </div>
      </div>

      <div class="bscond-group d-none" id="bscondEinField">
        <label class="form-label small fw-semibold">EIN</label>
        <input type="text" class="form-control mb-3" id="bscondEin">
      </div>

      <button type="button" class="btn btn-dark btn-sm fw-bold w-100" id="bscondSubmit">Continue</button>
    </div>
  </div>
</div>

.bscond-card { width: 360px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }

const type = document.getElementById('bscondType');
const businessFields = document.getElementById('bscondBusinessFields');
const nonprofitFields = document.getElementById('bscondNonprofitFields');
const einField = document.getElementById('bscondEinField');
const registered = document.getElementById('bscondRegistered');

function update() {
  const v = type.value;
  businessFields.classList.toggle('d-none', v !== 'business');
  nonprofitFields.classList.toggle('d-none', v !== 'nonprofit');
  // A second-level condition: the EIN field only shows for a nonprofit that
  // has also checked "registered 501(c)(3)" — nested conditional logic, not
  // just a flat one-field-per-option mapping.
  einField.classList.toggle('d-none', !(v === 'nonprofit' && registered.checked));
}

type.addEventListener('change', update);
registered.addEventListener('change', update);
update();