x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<form action="/" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="mHnuv4P_9EsLnL9UwRy75ZKIbKaopABxXkbatJEA-4mfU-JLpEQNFidS9DCItjbprnntNtDxpqxU1QExWtGLHQ" autocomplete="off" /> <fieldset x-data="{ uncheckMatching(selector) { this.$root.querySelectorAll(selector).forEach((cb) => { if (cb.checked) { cb.checked = false; cb.dispatchEvent(new Event('change', { bubbles: true })); } }); }, onOptionChange(event) { if (event.target.matches('input[type=checkbox]') && event.target.checked) { this.uncheckMatching('[data-exclusive-checkbox-group=exclusive] input[type=checkbox]'); } }, onExclusiveChange(event) { if (event.target.matches('input[type=checkbox]') && event.target.checked) { this.uncheckMatching('[data-exclusive-checkbox-group=options] input[type=checkbox]'); } }, handleItemClick(event) { if (event.target.closest('input, label, button, a, [role=button], [data-no-toggle]')) return; const item = Array.from(event.currentTarget.children).find((child) => child.contains(event.target)); if (!item) return; const checkbox = item.querySelector('input[type=checkbox]'); if (!checkbox || checkbox.disabled) return; checkbox.click(); } }" class="fieldset-group cfa-stack-xl"> <legend class="sr-only">Which of these apply to you?</legend> <div data-exclusive-checkbox-group="options" class="cfa-stack-xl [&>*]:cursor-pointer" @change="onOptionChange($event)" @click="handleItemClick($event)"> <div class="cfa-card bg-white border border-border-secondary rounded-lg p-cfa-lg"> <div class="cfa-stack-sm"> <div class="flex items-center gap-cfa-sm"> <span class="cfa-checkbox-wrap relative inline-flex h-6 w-6"><input name="form_component_preview_test_model[option_one]" type="hidden" value="" autocomplete="off" /><input class="cfa-checkbox h-6 w-6 rounded border checked:border-2 disabled:border-border-disabled border-border-default" aria-required="true" type="checkbox" value="1" name="form_component_preview_test_model[option_one]" id="form_component_preview_test_model_option_one" /><svg class="cfa-icon absolute inset-0 pointer-events-none text-icon-default" width="24" height="24" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#check"></use></svg></span> <label for="form_component_preview_test_model_option_one">Option one</label> </div> </div> <p class="italic text-sm text-slate-700">Description of option one.</p> </div> <div class="cfa-card bg-white border border-border-secondary rounded-lg p-cfa-lg"> <div class="cfa-stack-sm"> <div class="flex items-center gap-cfa-sm"> <span class="cfa-checkbox-wrap relative inline-flex h-6 w-6"><input name="form_component_preview_test_model[option_two]" type="hidden" value="" autocomplete="off" /><input class="cfa-checkbox h-6 w-6 rounded border checked:border-2 disabled:border-border-disabled border-border-default" aria-required="true" type="checkbox" value="1" name="form_component_preview_test_model[option_two]" id="form_component_preview_test_model_option_two" /><svg class="cfa-icon absolute inset-0 pointer-events-none text-icon-default" width="24" height="24" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#check"></use></svg></span> <label for="form_component_preview_test_model_option_two">Option two</label> </div> </div> <p class="italic text-sm text-slate-700">Description of option two.</p> </div> <div class="cfa-card bg-white border border-border-secondary rounded-lg p-cfa-lg"> <div class="cfa-stack-sm"> <div class="flex items-center gap-cfa-sm"> <span class="cfa-checkbox-wrap relative inline-flex h-6 w-6"><input name="form_component_preview_test_model[option_three]" type="hidden" value="" autocomplete="off" /><input class="cfa-checkbox h-6 w-6 rounded border checked:border-2 disabled:border-border-disabled border-border-default" aria-required="true" type="checkbox" value="1" name="form_component_preview_test_model[option_three]" id="form_component_preview_test_model_option_three" /><svg class="cfa-icon absolute inset-0 pointer-events-none text-icon-default" width="24" height="24" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#check"></use></svg></span> <label for="form_component_preview_test_model_option_three">Option three</label> </div> </div> </div> </div> <div data-exclusive-checkbox-group="exclusive" class="[&>*]:cursor-pointer" @change="onExclusiveChange($event)" @click="handleItemClick($event)"> <div class="cfa-card bg-white border border-border-secondary rounded-lg p-cfa-lg"> <div class="cfa-stack-sm"> <div class="flex items-center gap-cfa-sm"> <span class="cfa-checkbox-wrap relative inline-flex h-6 w-6"><input name="form_component_preview_test_model[none_apply]" type="hidden" value="" autocomplete="off" /><input class="cfa-checkbox h-6 w-6 rounded border checked:border-2 disabled:border-border-disabled border-border-default" aria-required="true" type="checkbox" value="1" name="form_component_preview_test_model[none_apply]" id="form_component_preview_test_model_none_apply" /><svg class="cfa-icon absolute inset-0 pointer-events-none text-icon-default" width="24" height="24" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#check"></use></svg></span> <label for="form_component_preview_test_model_none_apply">None of these apply</label> </div> </div> </div> </div> </fieldset></form>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%= form_with url: "/", method: :post, model: FormComponentPreview::TestModel.new do |f| %> <%= render ExclusiveCheckboxGroupComponent.new(legend: "Which of these apply to you?") do |c| %> <% c.with_exclusive_option do %> <%= render CardComponent.new do %> <%= render SingleCheckboxComponent.new(form: f, method: :none_apply, label: "None of these apply") %> <% end %> <% end %> <%= render CardComponent.new do %> <%= render SingleCheckboxComponent.new(form: f, method: :option_one, label: "Option one") %> <p class="italic text-sm text-slate-700">Description of option one.</p> <% end %> <%= render CardComponent.new do %> <%= render SingleCheckboxComponent.new(form: f, method: :option_two, label: "Option two") %> <p class="italic text-sm text-slate-700">Description of option two.</p> <% end %> <%= render CardComponent.new do %> <%= render SingleCheckboxComponent.new(form: f, method: :option_three, label: "Option three") %> <% end %> <% end %><% end %>No notes provided.
No params configured.