<form action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="jGoRdOI1waXLtovp3_3GvekgjKQuihOOJNi2Jh7ZkxmyUDulsOtzlVwL8lnJVURqhR77LpHN5sTQock_hi_5uw" autocomplete="off" />
  <div class="space-y-4" x-data x-init="Alpine.store('favorite_fruits', '');">
    <label class="label block " for="form_component_preview_test_model_favorite_fruits">Favorite fruits</label>
    <select x-model="$store.favorite_fruits" name="form_component_preview_test_model[favorite_fruits]" id="form_component_preview_test_model_favorite_fruits"><option value="">- Select -</option>
      <option value="orange">Orange</option>
      <option value="banana">Banana</option>
      <option value="apple">Apple</option></select>
  </div>
  <div x-data="{condition: false}"
     x-effect="condition = $store.favorite_fruits === 'banana' ||
                           (Array.isArray($store.favorite_fruits) && $store.favorite_fruits.includes('banana'))">
    <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>