x
1
2
3
4
5
6
7
8
9
10
11
12
<form action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="_V9PzHEj9KUu3XJKl9nnCCf5Y3qoGmZKGuMRmV8fqs6B0V3IY32zPHcvGVImcx08jZyDRtGYUOqf-GWKq9nPKQ" autocomplete="off" /> <div class="cfa-card bg-white border border-border-secondary rounded-lg p-cfa-lg"> <h2>Do you like pineapple on pizza?</h2> <fieldset class="fieldset-group" x-data x-init="Alpine.store('pineapple_pizza_preference', '');"> <legend class="sr-only">Do you like pineapple on pizza?</legend> <div class="cfa-stack-med"><input type="hidden" name="form_component_preview_test_model[pineapple_pizza_preference]" value="" autocomplete="off" /> <div class="form_item"><input x-model="$store.pineapple_pizza_preference" class="cfa-radio" 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="form_item"><input x-model="$store.pineapple_pizza_preference" class="cfa-radio" 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> </fieldset> </div></form>1
2
3
4
5
6
7
<%# form OUTSIDE the card so the fieldset is a direct child of .cfa-card — mirrors real app usage %><%= form_with url: "/", method: :post, model: FormComponentPreview::TestModel.new do |f| %> <%= render CardComponent.new do %> <h2>Do you like pineapple on pizza?</h2> <%= render RadioButtonsComponent.new(form: f, method: :pineapple_pizza_preference, collection: FormComponentPreview.yes_no_options, item_value_method: :value, item_label_method: :label, legend: "Do you like pineapple on pizza?") %> <% end %><% end %>No notes provided.
No params configured.