Forms Edit

<%= render_form_for(@user, class: "w-full") do |form| %>
  <div class="grid grid-cols-3 items-baseline mb-4">
    <%= form.label :email, class: "text-right mr-4 text-lg" %>
    <%= form.text_field :email, class: "col-span-2" %>
  </div>
  <div class="grid grid-cols-3 items-baseline">
    <%= form.label :password, class: "text-right mr-4 text-lg" %>
    <%= form.password_field :password, class: "col-span-2 mb-8" %>
  </div>
  <div class="flex justify-center">
    <%= form.submit "Create Account" %>
  </div>
<% end %>

Installation

  rails generate shadcn-ui forms

Usage

<%= render_form_for() do |form| %>
  <%= form.label :email %>
  <%= form.text_field  %>
  <%= form.password_field %>
  <%= form.submit "Submit" %>
<% end %>

The Forms component introduces:

• app/components/shadcn/form_builder.rb
• app/helpers/components/forms_helper.rb

The Shadcn::FormBuilder is a custom form builder that extends the FormBuilder class. It adds the following methods that provide the form with inputs and controls:

• label
• text_field
• password_field
• email_field

To use these methods which generate the styled, ActiveModel backed form, you use the render_form_for or render_form_with methods provided by app/helpers/components/forms_helper.rb. These methods yield the common FormBuilder instance that you can use to generate the controls and inputs above.

If a form field or attribute fails validation, its label and input will be given an error class to allow for styling. The default error style is defined in app/assets/stylesheets/shadcn.css