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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<div class="p-4 max-w-lg"> <h3 class="text-lg font-semibold mb-4">Form Builder Integration Example</h3> <form data-turbo="false" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="Wn8HQzGlmBH6lskM6FSML8NVdCgiYNqGCmtGp_G9NKyQla8ws_hYT985-lRDU95fDW1gM_kcdD0Oji_uBqSniQ" /> <div class="space-y-6"> <fieldset class="form-field-wrapper"> <legend class="block font-medium text-gray-700 mb-2 text-sm"> User Roles <span class="text-danger-600 ml-0.5">*</span> </legend> <div class="flex flex-col gap-2.5"> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="user_roles_0" name="user[roles][]" value="admin" 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="user_roles_0" class="select-none cursor-pointer text-gray-700 text-sm"> Administrator </label> </div> </div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="user_roles_1" name="user[roles][]" value="editor" 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="user_roles_1" class="select-none cursor-pointer text-gray-700 text-sm"> Editor </label> </div> </div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="user_roles_2" name="user[roles][]" value="viewer" 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="user_roles_2" class="select-none cursor-pointer text-gray-700 text-sm"> Viewer </label> </div> </div> </div> <div class="block text-gray-600 mt-2 text-sm"> Select the roles for this user </div> </fieldset> <fieldset class="form-field-wrapper"> <legend class="block font-medium text-gray-700 mb-2 text-sm"> Notification Preferences </legend> <div class="flex flex-row flex-wrap gap-x-6 gap-y-2.5"> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="user_notifications_0" name="user[notifications][]" value="email" 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="user_notifications_0" class="select-none cursor-pointer text-gray-700 text-sm"> Email </label> </div> </div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="user_notifications_1" name="user[notifications][]" value="push" 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="user_notifications_1" class="select-none cursor-pointer text-gray-700 text-sm"> Push </label> </div> </div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2.5"> <input type="checkbox" id="user_notifications_2" name="user[notifications][]" value="sms" 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="user_notifications_2" class="select-none cursor-pointer text-gray-700 text-sm"> SMS </label> </div> </div> </div> </fieldset> <fieldset class="form-field-wrapper"> <legend class="block font-medium text-gray-700 mb-2 text-sm"> Programming Skills </legend> <div class="flex flex-row flex-wrap gap-x-5 gap-y-2"> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2"> <input type="checkbox" id="user_skills_0" name="user[skills][]" value="Ruby" 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-accent-600 checked:border-accent-600 focus:ring-accent-500 bg-white" /> <label for="user_skills_0" class="select-none cursor-pointer text-gray-700 text-sm"> Ruby </label> </div> </div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2"> <input type="checkbox" id="user_skills_1" name="user[skills][]" value="JavaScript" 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-accent-600 checked:border-accent-600 focus:ring-accent-500 bg-white" /> <label for="user_skills_1" class="select-none cursor-pointer text-gray-700 text-sm"> Javascript </label> </div> </div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2"> <input type="checkbox" id="user_skills_2" name="user[skills][]" value="Python" 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-accent-600 checked:border-accent-600 focus:ring-accent-500 bg-white" /> <label for="user_skills_2" class="select-none cursor-pointer text-gray-700 text-sm"> Python </label> </div> </div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2"> <input type="checkbox" id="user_skills_3" name="user[skills][]" value="Go" 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-accent-600 checked:border-accent-600 focus:ring-accent-500 bg-white" /> <label for="user_skills_3" class="select-none cursor-pointer text-gray-700 text-sm"> Go </label> </div> </div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2"> <input type="checkbox" id="user_skills_4" name="user[skills][]" value="Rust" 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-accent-600 checked:border-accent-600 focus:ring-accent-500 bg-white" /> <label for="user_skills_4" class="select-none cursor-pointer text-gray-700 text-sm"> Rust </label> </div> </div> <div class="form-field-wrapper"> <div class="flex items-start flex-row gap-2"> <input type="checkbox" id="user_skills_5" name="user[skills][]" value="TypeScript" 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-accent-600 checked:border-accent-600 focus:ring-accent-500 bg-white" /> <label for="user_skills_5" class="select-none cursor-pointer text-gray-700 text-sm"> Typescript </label> </div> </div> </div> </fieldset> <div class="pt-4"> <button type="submit" data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" class="inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-grayscale-50 px-4 py-2 text-base gap-2 cursor-pointer"> <span data-better-ui--button-target="spinner" class="hidden"> <svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> <span class="sr-only">Loading...</span> </span> <span data-better-ui--button-target="content" class=" inline-flex items-center gap-2"> Save Preferences </span> </button> </div> </div> </form></div>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
<div class="p-4 max-w-lg"> <h3 class="text-lg font-semibold mb-4">Form Builder Integration Example</h3> <%= form_with url: "#", method: :post, builder: BetterUi::UiFormBuilder, data: { turbo: false } do |f| %> <div class="space-y-6"> <%= render BetterUi::Forms::CheckboxGroupComponent.new( name: "user[roles]", collection: [ ["Administrator", "admin"], ["Editor", "editor"], ["Viewer", "viewer"] ], selected: ["editor"], legend: "User Roles", hint: "Select the roles for this user", required: true ) %> <%= render BetterUi::Forms::CheckboxGroupComponent.new( name: "user[notifications]", collection: [ ["Email", "email"], ["Push", "push"], ["SMS", "sms"] ], legend: "Notification Preferences", orientation: :horizontal, variant: :secondary ) %> <%= render BetterUi::Forms::CheckboxGroupComponent.new( name: "user[skills]", collection: ["Ruby", "JavaScript", "Python", "Go", "Rust", "TypeScript"], legend: "Programming Skills", orientation: :horizontal, size: :sm, variant: :accent ) %> <div class="pt-4"> <%= render BetterUi::ButtonComponent.new(type: :submit, variant: :primary) do %> Save Preferences <% end %> </div> </div> <% end %></div>No notes provided.
No params configured.