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"> <label for="example_xs" class="block font-medium text-gray-700 mb-1 text-xs"> Size: xs </label> <div class="relative flex items-center"> <input name="example_xs" placeholder="XS input" class="block w-full rounded-md border shadow-sm transition-colors duration-200 text-xs py-1 px-2 border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-opacity-20 focus:outline-none" type="text" /> </div> </div> </div> <div> <div class="form-field-wrapper"> <label for="example_sm" class="block font-medium text-gray-700 mb-1 text-sm"> Size: sm </label> <div class="relative flex items-center"> <input name="example_sm" placeholder="SM input" class="block w-full rounded-md border shadow-sm transition-colors duration-200 text-sm py-1.5 px-3 border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-opacity-20 focus:outline-none" type="text" /> </div> </div> </div> <div> <div class="form-field-wrapper"> <label for="example_md" class="block font-medium text-gray-700 mb-1 text-sm"> Size: md </label> <div class="relative flex items-center"> <input name="example_md" placeholder="MD input" class="block w-full rounded-md border shadow-sm transition-colors duration-200 text-base py-2 px-4 border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-opacity-20 focus:outline-none" type="text" /> </div> </div> </div> <div> <div class="form-field-wrapper"> <label for="example_lg" class="block font-medium text-gray-700 mb-1 text-base"> Size: lg </label> <div class="relative flex items-center"> <input name="example_lg" placeholder="LG input" class="block w-full rounded-md border shadow-sm transition-colors duration-200 text-lg py-2.5 px-5 border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-opacity-20 focus:outline-none" type="text" /> </div> </div> </div> <div> <div class="form-field-wrapper"> <label for="example_xl" class="block font-medium text-gray-700 mb-1 text-lg"> Size: xl </label> <div class="relative flex items-center"> <input name="example_xl" placeholder="XL input" class="block w-full rounded-md border shadow-sm transition-colors duration-200 text-xl py-3 px-6 border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-opacity-20 focus:outline-none" type="text" /> </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::BaseComponent::SIZES.each do |size| %> <div> <%= render BetterUi::Forms::TextInputComponent.new( name: "example_#{size}", label: "Size: #{size}", placeholder: "#{size.to_s.upcase} input", size: size ) %> </div> <% end %></div>No notes provided.
No params configured.