Search for a command to run...
Custom Form Builders in Ruby on Rails
I'm an engineer, educator, and entrepreneur that has been building digital products for over 20 years with experience in startups, education, technical training, and developer ecosystems.
I founded Flatiron School in NYC where I taught thousands of people how to code. Previously, I was the founder of Designer Pages. Currently I'm the Chief Product Officer at Revature.
No comments yet. Be the first to comment.
How to easily design in code and compare designs side by side in Ruby on Rails applications.
I'm trying to improve my design engineering and have been practicing and looking for opportunities to flex and grow. One of my favorite new techniques is View Transitions, a simple way using CSS to animate transitions between states of the view, whet...
We're going to build a common UI pattern: a sortable, paginated table using the power of Ruby on Rails and Turbo Frames. Sortable Table Headers The first step is to create the sortable table headers as simple links. I wrote a few helper methods in Ru...
A common pattern is having a search form that filters a list of items. That's what we're going to build now with a minimal amount of code using Turbo Frames and Stimulus. Here's what it will look like in the end. We've got a bunch of jobs, each with...
Another common UI pattern is a slide over. This is a modal that slides in from the side of the screen. It's really easy it turns out to implement this with a Turbo Frame. Let's do it. Step 1: The Slide Over Turbo Frame First, we need to create a Tur...
For shadcn on rails, I wanted to create a custom form builder that would plug my shadcn form inputs and controls into ActiveModel so that the error validations and other features native to Rails forms would work.
First, let's create a new form builder. We'll call it ShadcnFormBuilder, and it will inherit from ActionView::Helpers::FormBuilder.
class ShadcnFormBuilder < ActionView::Helpers::FormBuilder
def text_field(method, options = {})
options[:class] << " error" if @object.errors[method].any?
@template.render_input(
name: "#{object_name}[#{method}]",
id: "#{object_name}_#{method}",
value: @object.send(method),
type: "text", **options
)
end
end
In the text_field method, we first check if there are any validation errors for the given field (method). If there are, we add the "error" CSS class to the field.
The important part here is maintaining the conventions of Rails, like naming the form fields correctly using "#{object_name}[#{method}]" and giving it the appropriate ID using "#{object_name}_#{method}"
Just to be clear, with the form builder methods, you get access to some important objects that help you build your custom form.
The form builder objects I'm using above are:
@object which represents the underlying object that was passed to form_for or form_with.
@template which represents the ActionView instance of the rendering engine. You need to call any of the ActionView methods you would normally, like text_field_tag, or in our case our custom method supplied by our Components::InputHelper render_input.
object_name is just a shortcut method that gives you the class of the @object, useful for generating HTML attributes.
Next, we call the render_input helper method on the @template object, passing the necessary parameters to it.
The render_input helper method is where we'll define the HTML for our text field. It lives in a helper module, Components::InputHelper.
module Components::InputHelper
def render_input(name:, label: false, id: nil, type: :text, value: nil, **options)
# define and apply CSS classes
# ...
render partial: "components/ui/input", locals: {
type:,
label:,
name:,
value:,
id:,
options: options
}
end
end
The render_input method is responsible for rendering the form field's HTML. It receives various options, formats the CSS classes and other attributes, and then renders a partial (_input.html.erb) that contains the actual HTML for the form field.
Our _input.html.erb file looks like this:
<%= text_field_tag name, value, type: type, id: id,
class: options[:class],
placeholder: options[:placeholder],
autocomplete: options[:autocomplete],
autocapitalize: options[:autocapitalize],
autocorrect: options[:autocorrect],
disabled: options[:disabled],
required: options[:required],
readonly: options[:readonly],
data: options[:data] %>
Here, we use the Rails text_field_tag helper to generate the HTML for our form field. We pass all the necessary attributes to it.
To use our custom form builder, we've created two additional helper methods: render_form_with and render_form_for. These methods simply call the corresponding Rails form helper methods (form_with and form_for), but they also pass the builder: ShadcnFormBuilder option, which tells Rails to use our custom form builder.
module Components::FormsHelper
def render_form_with(**opts)
form_with(**opts.merge(builder: ShadcnFormBuilder)) do |form|
yield form
end
end
def render_form_for(obj, **opts)
form_for(obj, **opts.merge(builder: ShadcnFormBuilder), html: opts) do |form|
yield form
end
end
end
Now, when we want to create a form in our views, we can use the render_form_for helper:
<%= render_form_for(@user) do |f| %>
<%= f.text_field :username %>
<% end %>
Building a custom form builder in Rails gives you the flexibility to define your own form fields' HTML and to manipulate form fields based on certain conditions (like the presence of validation errors). This example demonstrated how you could create a simple custom form builder that gives you control over the form fields' CSS classes and HTML attributes. From here, you could extend your form builder to add more field types, apply more custom logic, and further customize your form fields.