x
1
2
3
4
5
6
7
8
9
10
11
<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-29T09:58:29.471Z","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="DuHQPHElT-fvIv76yOjKPn-vSHOlDP6AUXS6hPmQe9-6AUabKtax1D4y4ArGhwAzdCgNu_J8yw2qecGoyOxWkg" autocomplete="off" /> <div class="space-y-2"> <div class="flex items-center"> <botyglot-label for="user_first_name">First name</botyglot-label> </div> <botyglot-input suggest_value="true" numeric_format="false" display_error="true" placeholder="Enter your first name" type="text" name="user[first_name]" id="user_first_name" ></botyglot-input> <div class="text-sm text-gray-600"> Suggested value: <botyglot-suggested-value name="user[first_name]" numeric_format="false" class="elevate-suggested-value--emphasized" data-testid="suggested-first-name"></botyglot-suggested-value> </div> </div></botyglot-form></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%- url = polymorphic_path(['', User], action: :create) -%><%= vuejs_form_with(model: user, url: url, local: true, scope: :user, builder: default_form_builder) do |form| %> <div class="space-y-2"> <%= render Elevate::VueJs::LabelComponent.new(form: form, field_name: :first_name) %> <%= render Elevate::VueJs::FieldComponent.new(form: form, field_name: :first_name, placeholder: "Enter your first name", suggest_value: true) %> <div class="text-sm text-gray-600"> Suggested value: <%= render Elevate::VueJs::SuggestedValueComponent.new( form: form, field_name: :first_name, class: "elevate-suggested-value--emphasized", data: { testid: "suggested-first-name" } ) %> </div> </div><% end %>Suggested value with custom HTML options/classes
No params configured.
No assets to display.