Cfa Ui Components
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="BzcbPNfUg3cnQS0d6tfzAgZhfG-0R85Nr0eTsyhDI5BqinxjTdTZSEKxzcsfRG449iYjt6sfRvF7KJ3icsz3OQ" autocomplete="off" />
  <div class="space-y-4" x-data x-init="Alpine.store('favorite_fruits', 'banana');">
    <input value="" autocomplete="off" type="hidden" name="form_component_preview_test_model[favorite_fruits]" id="form_component_preview_test_model_favorite_fruits" />
    <div class="space-y-4"><input type="hidden" name="form_component_preview_test_model[favorite_fruits]" value="" autocomplete="off" />
      <div class="radio_button_item"><input x-model="$store.favorite_fruits" type="radio" value="orange" name="form_component_preview_test_model[favorite_fruits]" id="form_component_preview_test_model_favorite_fruits_orange" /><label for="form_component_preview_test_model_favorite_fruits_orange">Orange</label></div>
      <div class="radio_button_item"><input x-model="$store.favorite_fruits" type="radio" value="banana" checked="checked" name="form_component_preview_test_model[favorite_fruits]" id="form_component_preview_test_model_favorite_fruits_banana" /><label for="form_component_preview_test_model_favorite_fruits_banana">Banana</label></div>
      <div class="radio_button_item"><input x-model="$store.favorite_fruits" type="radio" value="apple" name="form_component_preview_test_model[favorite_fruits]" id="form_component_preview_test_model_favorite_fruits_apple" /><label for="form_component_preview_test_model_favorite_fruits_apple">Apple</label></div>
    </div>
  </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">
      <h2>Header</h2>
      <p>Body</p>
    </div>
  </div>
</form>
1
2
custom_model = TestModel.new(favorite_fruits: "banana")
render("non_component_previews/prefilled_radio_buttons_conditional", model: custom_model)

No notes provided.

No params configured.