Botyglot Components V0.0.1

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div data-controller="vuejs-forms" data-values="{"user":{"id":null,"first_name":null,"last_name":null,"phone":null,"email":null,"amount":null,"website":null,"country":null,"birth_date":null,"appointment_at":null,"code_snippet":null,"bio":null,"preferred_time":null,"newsletter":false,"marketing_emails":null,"terms_accepted":false,"privacy_policy_accepted":false,"interests":null,"notification_preferences":[],"errors":{"_is_valid":true},"warnings":{"_is_valid":true},"suggested_values":{"first_name":"Oscar Botyglot","country":"france","birth_date":"2026-03-28","appointment_at":"2026-03-29T10:04:22.383Z","code_snippet":"# Sample Ruby code\nclass HelloWorld\n  def greet(name)\n    puts \"Hello, #{name}!\"\n  end\nend\n\nhello = HelloWorld.new\nhello.greet(\"World\")\n","phone":"+33 1 23 45 67 89","amount":1234.56,"bio":"Passionate software developer with expertise in Ruby on Rails and Vue.js. Always eager to learn new technologies and share knowledge with the community.","preferred_time":"2026-03-28T14:30:00.000Z","newsletter":true,"marketing_emails":true,"terms_accepted":true,"privacy_policy_accepted":true,"interests":["ruby","javascript"],"notification_preferences":["email","push"]}}}" data-validation-url="/users"><botyglot-form id="new_user_form" class="form user-form" action="/users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="TZ6ZGqQZZUKpu0k5IMQ9eYyKb5Gb7PN1VjXmot2A8nL8AtB_8cEluy1fDcXbu5J3xaykIZEfw-nsweuWpBi3aA" autocomplete="off" />
  <div class="flex items-center">
    <botyglot-label for="user_email">Email</botyglot-label>
    <span class="elevate-tooltip--container text-sm">
      <span class="ml-2 elevate-icon elevate-icon--scheme--primary elevate-icon--size--s">
        <svg viewbox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
          <circle cx="12.5" cy="12.5" r="9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></circle>
          <path d="M11.3162 13.3081C11.3162 13.0508 11.4004 12.8379 11.5687 12.6697C11.7369 12.4915 11.9497 12.4024 12.2071 12.4024C12.6129 12.4024 12.9792 12.343 13.3058 12.2242C13.6325 12.0956 13.8898 11.8926 14.0779 11.6155C14.2759 11.3383 14.3749 10.9721 14.3749 10.5168C14.3749 10.1802 14.2907 9.88325 14.1225 9.62589C13.9641 9.36853 13.7414 9.16561 13.4543 9.01713C13.1772 8.86866 12.8604 8.79442 12.5041 8.79442C12.2269 8.79442 11.9646 8.84391 11.7171 8.94289C11.4796 9.04188 11.2618 9.17551 11.0638 9.34378C10.9055 9.48236 10.7124 9.58629 10.4848 9.65558C10.267 9.71497 10.0443 9.66053 9.81662 9.49226C9.57906 9.31409 9.45038 9.10127 9.43058 8.85381C9.41079 8.60635 9.50482 8.37868 9.71269 8.17081C10.069 7.80457 10.4848 7.52246 10.9599 7.32449C11.4449 7.11663 11.9596 7.01269 12.5041 7.01269C13.1871 7.01269 13.8008 7.17107 14.3452 7.48782C14.8995 7.79467 15.34 8.21041 15.6666 8.73503C15.9933 9.25964 16.1566 9.85355 16.1566 10.5168C16.1566 11.0117 16.0824 11.4522 15.9339 11.8382C15.7854 12.2143 15.5726 12.541 15.2954 12.8181C15.0282 13.0854 14.7114 13.3032 14.3452 13.4714C13.9888 13.6298 13.5978 13.7437 13.1722 13.8129C13.1524 13.8228 13.1326 13.8327 13.1128 13.8426C13.1029 13.8525 13.098 13.8674 13.098 13.8872V14.4365C13.098 14.6939 13.0138 14.9117 12.8456 15.0898C12.6773 15.2581 12.4645 15.3423 12.2071 15.3423C11.9497 15.3423 11.7369 15.2581 11.5687 15.0898C11.4004 14.9117 11.3162 14.6939 11.3162 14.4365V13.3081ZM12.1329 18C11.8458 18 11.6231 17.9258 11.4647 17.7773C11.3162 17.6189 11.242 17.3962 11.242 17.1091V16.8567C11.242 16.5697 11.3162 16.3519 11.4647 16.2034C11.6231 16.0451 11.8458 15.9659 12.1329 15.9659H12.3259C12.6129 15.9659 12.8307 16.0451 12.9792 16.2034C13.1376 16.3519 13.2168 16.5697 13.2168 16.8567V17.1091C13.2168 17.3962 13.1376 17.6189 12.9792 17.7773C12.8307 17.9258 12.6129 18 12.3259 18H12.1329Z" fill="currentColor"></path>
        </svg>
      </span>
      <span class="elevate-tooltip--text elevate-tooltip--text--top">
        <span class="elevate-tooltip--arrow"></span>
        We'll never share your email with anyone else.
      </span>
    </span></div>
</botyglot-form></div>
1
2
3
4
5
6
7
8
9
10
<%- url = polymorphic_path(['', User], action: :create) -%>
<%= vuejs_form_with(model: user, url: url, local: true, scope: :user, builder: default_form_builder) do |form| %>
  <%= render Elevate::VueJs::LabelComponent.new(
    form: form,
    field_name: :email,
    tooltip_text: "We'll never share your email with anyone else."
  ) %>
<% end %>

Label with tooltip text

No params configured.

No assets to display.