Form Builder
Build complete forms using BetterUi::UiFormBuilder with form_with. Integrates seamlessly with Rails models for automatic labels, errors, and validation.
Basic Form
A complete registration form using form_with and BetterUi::UiFormBuilder
<%= form_with model: @user, url: users_path, builder: BetterUi::UiFormBuilder do |f| %>
<%= f.bui_text_input :name, label: "Full Name", placeholder: "Your full name" %>
<%= f.bui_email_input :email, label: "Email Address" %>
<%= f.bui_password_input :password, label: "Password", hint: "Must be at least 8 characters" %>
<%= f.bui_number_input :age, label: "Age", min: 0, max: 120 %>
<%= f.bui_textarea :bio, label: "Bio", rows: 3, maxlength: 500 %>
<%= f.bui_select :role, [["Admin", "admin"], ["Editor", "editor"]], label: "Role" %>
<%= f.bui_checkbox :newsletter, label: "Subscribe to our newsletter" %>
<%= bui_button(type: :submit, variant: :primary) { "Create Account" } %>
<% end %>Form with Error States
Standalone inputs with error messages to demonstrate validation feedback
When using the form builder with an ActiveModel object, errors are automatically extracted.
Here we demonstrate the error display using standalone helpers with the errors: parameter.
can't be blank
is not a valid email address
is too short (minimum is 8 characters)
must include at least one uppercase letter
must be greater than or equal to 0
can't be blank
must be selected
must be accepted
<%# Standalone helpers with explicit errors %>
<%= bui_text_input("user[name]", label: "Name", value: "", errors: ["can't be blank"]) %>
<%= bui_email_input("user[email]", label: "Email", value: "invalid", errors: ["is not a valid email"]) %>
<%# With form builder, errors are automatic from the model %>
<%= form_with model: @user, builder: BetterUi::UiFormBuilder do |f| %>
<%= f.bui_text_input :name %> <%# errors auto-populated from @user.errors %>
<%= f.bui_email_input :email %>
<% end %>All Input Types
Every form builder method available in BetterUi::UiFormBuilder
<%= form_with model: @user, builder: BetterUi::UiFormBuilder do |f| %>
<%# Text-based inputs %>
<%= f.bui_text_input :name, label: "Name" %>
<%= f.bui_email_input :email, label: "Email" %>
<%= f.bui_password_input :password, label: "Password" %>
<%= f.bui_tel_input :phone, label: "Phone" %>
<%= f.bui_date_input :birthday, label: "Birthday" %>
<%= f.bui_time_input :start_time, label: "Start Time" %>
<%# Number %>
<%= f.bui_number_input :age, label: "Age", min: 0, max: 120 %>
<%# Textarea %>
<%= f.bui_textarea :bio, label: "Bio", rows: 4, maxlength: 500 %>
<%# Checkbox %>
<%= f.bui_checkbox :newsletter, label: "Subscribe" %>
<%# Checkbox Group %>
<%= f.bui_checkbox_group :roles, [["Admin", "admin"], ["Editor", "editor"]] %>
<%# Select %>
<%= f.bui_select :country, [["Italy", "it"], ["France", "fr"]], clearable: true %>
<% end %>Input Sizes
All form inputs support five size variants: xs, sm, md, lg, xl
<%= f.bui_text_input :name, size: :xs %>
<%= f.bui_text_input :name, size: :sm %>
<%= f.bui_text_input :name, size: :md %> <%# default %>
<%= f.bui_text_input :name, size: :lg %>
<%= f.bui_text_input :name, size: :xl %>Input States
Disabled and readonly states for form inputs
<%= f.bui_text_input :name, disabled: true %>
<%= f.bui_text_input :name, readonly: true %>
<%= f.bui_text_input :name, required: true %>Inputs with Icons
Use prefix_icon slot to add icons to text and number inputs
$
<%= f.bui_text_input :search do |input| %>
<% input.with_prefix_icon do %>
<svg class="h-5 w-5 text-grayscale-400">...</svg>
<% end %>
<% end %>
<%= f.bui_number_input :price do |input| %>
<% input.with_prefix_icon { "$" } %>
<% end %>