Superform 0.6.x released

Superform 0.6.x has been released, and it’s packed with a bunch of quality-of-life improvements.

Field Kits

The old way of rendering Superforms in Ruby 3.4 looked like this:

# The old way of rendering a Superform
render MyForm.new @user do
  render it.Field(:name).input
  render it.Field(:email).input(type: :email)
end

See all those render method calls? Nobody wants to type those. With Phlex & Field Kits, you can implicitly render fields with the #Field method.

# The new way of rendering a Superform
MyForm @user do
  it.Field(:name).input
  it.Field(:email).input(type: :email)
end

Who doesn’t like more concise code?

Better ERB rendering

You might think I built Field Kits to make rendering in Phlex more concise—which is true—but I also built it to make rendering in ERB more concise as well. Here’s what that looks like.

<%= render MyForm.new @user do
  it.Field(:name).input
  it.Field(:email).input(type: :email)
end %>

Notice what’s missing? Developers don’t have to put <% %> tags around every single line. This makes Superform the most concise form builder in Rails.

Phlex 2.0 compatibility

Phlex Rails established better conventions for organizing views and components in Rails apps. Superform now follows those conventions: forms live in app/views alongside your other views, and the base form is a component located at app/components/form.rb.

# ./app/components/form.rb
class Components::Form < Superform::Rails::Form
  # Your custom form methods go here
end

There’s an upgrade guide on Github if you’re using Superform 0.5.x and want to upgrade to follow Phlex 2.x conventions.

HTML5 inputs

As an “HTML Phlex purist”, whatever that means, I thought it would be great to ask people to write form fields “as close to HTML as possible”, which means they’d have to create an email field like this.

# The "HTML Phlex purist" way
MyForm @user do
  it.Field(:email).input(type: :email, class: "form-control")
end

But then again, who wants to type all that? Now you can create HTML5 inputs with dedicated methods.

# The new concise way
MyForm @user do
  it.Field(:email).email(class: "form-control")
end

I think this also strikes a nice balance between conciseness and readability.

Strong parameters

I finally made Superform’s strong parameters official with the Superform::Rails::StrongParameters module!

Here’s what a resource controller looks like using strong parameters with Superform.

# ./app/controllers/posts_controller.rb
class PostsController < ApplicationController
  include Superform::Rails::StrongParameters

  def create
    if save Views::Posts::Form.new Post.new
      redirect_to @post
    else
      render :new, status: :unprocessable_entity
    end
  end
end

The save method assigns the attributes through the form, based on the fields that were defined in the form class. This means you don’t have to maintain a separate list of permitted parameters in your controller.

What does a form look like, and where does it live? Glad you asked! Forms live in app/views alongside your other views.

# ./app/views/posts/form.rb
class Views::Posts::Form < Components::Form
  def view_template
    Field(:title).text
    Field(:body).textarea(rows: 10)
    Field(:publish_at).date
    Field(:featured).checkbox
    submit
  end
end

And you can easily render it from your create and edit views in ERB like this.

# Render the pre-built form in ERB
<%= render Form::User.new @user %>

Or in Phlex like this.

render Form::User.new @user

Start using it

To use Superform in your Rails app, you’ll need to have phlex-rails installed:

bundle add phlex-rails
rails g phlex:install

Then install Superform by running:

bundle add superform
rails g superform:install

There’s more in the Superform README about how to get started.

If you’d like to go deeper, there’s a Superform unit in the Phlex on Rails video course.