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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<div class="space-y-4 p-4"> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="variant_primary" name="variant_primary" 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="variant_primary" class="select-none cursor-pointer text-gray-700 text-sm"> Variant: Primary </label> </div> </div> </div> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="variant_secondary" name="variant_secondary" 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-secondary-600 checked:border-secondary-600 focus:ring-secondary-500 bg-white" /> <label for="variant_secondary" class="select-none cursor-pointer text-gray-700 text-sm"> Variant: Secondary </label> </div> </div> </div> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="variant_accent" name="variant_accent" 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-accent-600 checked:border-accent-600 focus:ring-accent-500 bg-white" /> <label for="variant_accent" class="select-none cursor-pointer text-gray-700 text-sm"> Variant: Accent </label> </div> </div> </div> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="variant_success" name="variant_success" 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-success-600 checked:border-success-600 focus:ring-success-500 bg-white" /> <label for="variant_success" class="select-none cursor-pointer text-gray-700 text-sm"> Variant: Success </label> </div> </div> </div> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="variant_danger" name="variant_danger" 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-danger-600 checked:border-danger-600 focus:ring-danger-500 bg-white" /> <label for="variant_danger" class="select-none cursor-pointer text-gray-700 text-sm"> Variant: Danger </label> </div> </div> </div> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="variant_warning" name="variant_warning" 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-warning-600 checked:border-warning-600 focus:ring-warning-500 bg-white" /> <label for="variant_warning" class="select-none cursor-pointer text-gray-700 text-sm"> Variant: Warning </label> </div> </div> </div> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="variant_info" name="variant_info" 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-info-600 checked:border-info-600 focus:ring-info-500 bg-white" /> <label for="variant_info" class="select-none cursor-pointer text-gray-700 text-sm"> Variant: Info </label> </div> </div> </div> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="variant_light" name="variant_light" 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-gray-200 checked:border-gray-400 focus:ring-gray-400 checked-dark bg-white" /> <label for="variant_light" class="select-none cursor-pointer text-gray-700 text-sm"> Variant: Light </label> </div> </div> </div> <div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="variant_dark" name="variant_dark" 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-400 checked:bg-gray-800 checked:border-gray-800 focus:ring-gray-600 bg-white" /> <label for="variant_dark" class="select-none cursor-pointer text-gray-700 text-sm"> Variant: Dark </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::ApplicationComponent::VARIANTS.each do |variant, _| %> <div> <%= render BetterUi::Forms::CheckboxComponent.new( name: "variant_#{variant}", label: "Variant: #{variant.to_s.titleize}", variant: variant, checked: true ) %> </div> <% end %></div>No notes provided.
No params configured.