Documentation

Form Builder

Built on top of Tailwind CSS’ forms plugin, Rails Designer’s Form Builder will make every input look good. All while using the form helpers interface you love.

You can write your forms just like you did before:

<%= form.text_field :name %>

Which, with the default CSS, will look like this:

Check the DOM; those Tailwind CSS classes are added for you!

Install

To start using the Form Builder, make sure you are on Rails Designer 1.10 or higher. Then check config/initializer/rails_designer.rb that form_builder is added in the config.view_helpers array. Make sure to restart your server after changing it.

If you want to use the Form Builder on all forms, add default_form_builder RailsDesigner::FormBuilder in your ApplicationController.

Or do it per form, like so: <%= form_with model: User.new, builder: RailsDesigner::FormBuilder do |form| %>.

Usage

You can use all the common, input types that are supported like normal. Every regular attribute is supported too. From text_field, to url_field and week_field.

<%= form.text_area :about, placeholder: "Tell us about yourself…" %>

You can override the class if needed:

<%= form.text_area :about, class: "px-4 py-2 bg-pink-200 border-pink-600 rounded-full" %>

If you only need to tweak one or two Tailwind CSS class, you can use additional_class and it will be appended to the class attribute:

<%= form.text_area :about, additional_class: "rounded-full" %>

Supported form field types

There is support for the following field types:

  • text_field
  • email_field
  • password_field
  • search_field
  • telephone_field
  • url_field
  • number_field
  • date_field
  • time_field
  • datetime_field
  • datetime_local_field
  • month_field
  • week_field
  • text_area (aliased textarea)
  • check_box (aliased checkbox)
  • radio_button
  • select
  • file_field
  • collection_select
  • collection_check_boxes (aliased collection_checkboxes)
  • collection_radio_buttons

Smart Inputs

A typical input field is wrapped in an element and has a label. For those cases, you can use input. It works like this:

<%= form.input :name %>

It will wrap the text_field input in a div-element (or if present the FieldComponent) and a label (checks presence of LabelComponent). It is smart enough to check for certain types based on the attribute name. For example:

<%= form.input :email %>

…will create a email_field input.

FieldComponent

You can use the FieldComponent to consistently wrap your form inputs. Works great with the FormLabelComponent too.

Install it using rails g rails_designer:component FormElements::Field.

A complete example, including FormLabelComponent, looks like this:

<%= render FieldComponent.new do |field| %>
  <% field.with_label { render FormLabelComponent.new(form: form, field: :company_email, label: "Company Email") } %>

  <% field.with_hint { "It's advised to use your actual company email" } %>

  <%= form.email_field :company_email %>
<% end %>

Configuration

If you want you can update the default CSS. Head over to config/initializer/rails_designer.rb and look for/add these values:

# config.form_builder.input_css = ""
# config.form_builder.file_field_css = ""
# config.form_builder.toggle_input_css = ""
# config.form_builder.toggle_label_css = ""