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
<div class="space-y-4 p-4"> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-1.5"> <input type="checkbox" id="size_xs" name="size_xs" value="1" checked="checked" class="appearance-none shrink-0 rounded border cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 w-3 h-3 border-gray-300 checked:bg-primary-600 checked:border-primary-600 focus:ring-primary-500 bg-white" /> <label for="size_xs" class="select-none cursor-pointer text-gray-700 text-xs"> Size: XS </label> </div> </div> </div> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2"> <input type="checkbox" id="size_sm" name="size_sm" value="1" checked="checked" class="appearance-none shrink-0 rounded border cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 w-4 h-4 border-gray-300 checked:bg-primary-600 checked:border-primary-600 focus:ring-primary-500 bg-white" /> <label for="size_sm" class="select-none cursor-pointer text-gray-700 text-sm"> Size: SM </label> </div> </div> </div> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="size_md" name="size_md" value="1" checked="checked" class="appearance-none shrink-0 rounded border cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 w-5 h-5 border-gray-300 checked:bg-primary-600 checked:border-primary-600 focus:ring-primary-500 bg-white" /> <label for="size_md" class="select-none cursor-pointer text-gray-700 text-sm"> Size: MD </label> </div> </div> </div> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-3"> <input type="checkbox" id="size_lg" name="size_lg" value="1" checked="checked" class="appearance-none shrink-0 rounded border cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 w-6 h-6 border-gray-300 checked:bg-primary-600 checked:border-primary-600 focus:ring-primary-500 bg-white" /> <label for="size_lg" class="select-none cursor-pointer text-gray-700 text-base"> Size: LG </label> </div> </div> </div> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-3.5"> <input type="checkbox" id="size_xl" name="size_xl" value="1" checked="checked" class="appearance-none shrink-0 rounded border cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 w-7 h-7 border-gray-300 checked:bg-primary-600 checked:border-primary-600 focus:ring-primary-500 bg-white" /> <label for="size_xl" class="select-none cursor-pointer text-gray-700 text-lg"> Size: XL </label> </div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
<div class="space-y-4 p-4"> <% BetterUi::Forms::CheckboxComponent::SIZES.each do |size| %> <div> <%= render BetterUi::Forms::CheckboxComponent.new( name: "size_#{size}", label: "Size: #{size.to_s.upcase}", size: size, checked: true ) %> </div> <% end %></div>No notes provided.
No params configured.