<form action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="UeCk7bCfNYk_9h7Xer2k7Oa0z7NimZMCkr-A6937okTxCmz--kQs98zcaceeSfghg_JrqDQ6BoI11j-0_xD5kA" autocomplete="off" />
  <div class="space-y-4" x-data x-init="Alpine.store('pineapple_pizza_preference', '');">
    <input value="" autocomplete="off" type="hidden" name="form_component_preview_test_model[pineapple_pizza_preference]" id="form_component_preview_test_model_pineapple_pizza_preference" />
    <div class="space-y-4"><input type="hidden" name="form_component_preview_test_model[pineapple_pizza_preference]" value="" autocomplete="off" />
      <div class="radio_button_item"><input x-model="$store.pineapple_pizza_preference" type="radio" value="yes" name="form_component_preview_test_model[pineapple_pizza_preference]" id="form_component_preview_test_model_pineapple_pizza_preference_yes" /><label for="form_component_preview_test_model_pineapple_pizza_preference_yes">Yes</label></div>
      <div class="radio_button_item"><input x-model="$store.pineapple_pizza_preference" type="radio" value="no" name="form_component_preview_test_model[pineapple_pizza_preference]" id="form_component_preview_test_model_pineapple_pizza_preference_no" /><label for="form_component_preview_test_model_pineapple_pizza_preference_no">No</label></div>
    </div>
  </div>
  <div x-data="{condition: false}"
     x-effect="condition = $store.pineapple_pizza_preference === 'yes' ||
                           (Array.isArray($store.pineapple_pizza_preference) && $store.pineapple_pizza_preference.includes('yes'))">
    <p class="sr-only" aria-live="polite" role="status"
     x-text="'Followup banana question is now ' + (condition ? 'visible' : 'hidden')">
    </p>
    <div x-cloak x-show="condition" class="space-y-4">
      But why!?
    </div>
  </div>
</form>