BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="form-field-wrapper">
  <label for="verified_email" class="block font-medium text-gray-700 mb-1 text-sm">
    Verified Email
  </label>
  <div class="relative flex items-center">
    <input name="verified_email" value="user@example.com" 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 pr-10" type="text" />
    <div class="absolute inset-y-0 flex items-center pointer-events-none px-4 right-0">
      <svg class="h-5 w-5 text-success-600" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
      </svg>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
render BetterUi::Forms::TextInputComponent.new(
  name: "verified_email",
  label: "Verified Email",
  value: "user@example.com"
) do |component|
  component.with_suffix_icon do
    '<svg class="h-5 w-5 text-success-600" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
    </svg>'.html_safe
  end
end

No notes provided.

No params configured.