BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="form-field-wrapper">
  <label for="comment" class="block font-medium text-gray-700 mb-1 text-sm">
    Comment
  </label>
  <div class="relative flex items-center">
    <div class="absolute top-0 flex items-start pointer-events-none px-4 pt-2 left-0">
      <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
      </svg>
    </div>
    <textarea name="comment" placeholder="Add your comment..." 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 pl-10 pr-10 resize-y" rows="4"></textarea>
    <div class="absolute top-0 flex items-start pointer-events-none px-4 pt-2 right-0">
      <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
render BetterUi::Forms::TextareaComponent.new(
  name: "comment",
  label: "Comment",
  placeholder: "Add your comment..."
) do |component|
  component.with_prefix_icon do
    '<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
    </svg>'.html_safe
  end
  component.with_suffix_icon do
    '<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>'.html_safe
  end
end

No notes provided.

No params configured.