Form Field

Description

Building complex forms with our generic form field components to apply bootstrap form styling and techniques.

PRO

This component is part of our professional component suite. See the installation instructions below for more on how to use it.

Arguments

Name	Default	Type	Description
`form`		`Rails form object`	A Rails form object (usually given as a block variable of form_with)
`floating`		`Boolean`	Use floating labels
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Examples

Input types

<%= form_with url: "/", authenticity_token: false do |form| %>
  <%= render Railsboot::FormFieldComponent.new(form: form) do |field| %>
    <% field.with_label(for: :first_name) { "Text Field" } %>
    <% field.with_text_field(name: :first_name, placeholder: "I'm a text field") %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :content) { "Text Area" } %>
    <% field.with_text_area(name: :content, rows: 2) %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :email) { "Email Field" } %>
    <% field.with_email_field(name: :email, placeholder: "test@example.com") %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :password) { "Password Field" } %>
    <% field.with_password_field(name: :password, placeholder: "*****") %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :phone) { "Phone Field" } %>
    <% field.with_phone_field(name: :phone, placeholder: "+49 12345 6789") %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :start_date) { "Date Field" } %>
    <% field.with_date_field(name: :start_date) %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "col-sm-4 col-md-2 mt-3") do |field| %>
    <% field.with_label(for: :color) { "Color Field" } %>
    <% field.with_color_field(name: :color) %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :number) { "Select Field" } %>
    <% field.with_select(name: :number, choices: ["Ruby", "JavaScript", "C++", "Rust"], options: {prompt: "What's your favorite programming language?"}) %>
  <% end %>
<% end %>

<form action="/" accept-charset="UTF-8" method="post">
  <div class="">
    <label class="form-label" for="first_name">Text Field</label>
    <input placeholder="I'm a text field" class="form-control" type="text" name="first_name" id="first_name" />
  </div>
  <div class="mt-3">
    <label class="form-label" for="content">Text Area</label>
    <textarea rows="2" class="form-control" name="content" id="content">
</textarea>
  </div>
  <div class="mt-3">
    <label class="form-label" for="email">Email Field</label>
    <input placeholder="test@example.com" class="form-control" type="email" name="email" id="email" />
  </div>
  <div class="mt-3">
    <label class="form-label" for="password">Password Field</label>
    <input placeholder="*****" class="form-control" type="password" name="password" id="password" />
  </div>
  <div class="mt-3">
    <label class="form-label" for="phone">Phone Field</label>
    <input placeholder="+49 12345 6789" class="form-control" type="tel" name="phone" id="phone" />
  </div>
  <div class="mt-3">
    <label class="form-label" for="start_date">Date Field</label>
    <input class="form-control" type="date" name="start_date" id="start_date" />
  </div>
  <div class="col-sm-4 col-md-2 mt-3">
    <label class="form-label" for="color">Color Field</label>
    <input class="form-control" value="#000000" type="color" name="color" id="color" />
  </div>
  <div class="mt-3">
    <label class="form-label" for="number">Select Field</label>
    <select class="form-select" name="number" id="number"><option value="">What's your favorite programming language?</option>
      <option value="Ruby">Ruby</option>
      <option value="JavaScript">JavaScript</option>
      <option value="C++">C++</option>
      <option value="Rust">Rust</option></select>
  </div>
</form>

With caption

<%= form_with url: "/", authenticity_token: false do |form| %>
  <%= render Railsboot::FormFieldComponent.new(form: form) do |field| %>
    <% field.with_label(for: :email, placeholder: "test@example.com") { "Email" } %>
    <% field.with_email_field(name: :email) %>
    <% field.with_caption { "Please enter a valid email address" } %>
  <% end %>
<% end %>

<form action="/" accept-charset="UTF-8" method="post">
  <div class="">
    <label placeholder="test@example.com" class="form-label" for="email">Email</label>
    <input class="form-control" type="email" name="email" id="email" />
    <div class="form-text">Please enter a valid email address</div>
  </div>
</form>

With validation

<%= form_with url: "/", authenticity_token: false do |form| %>
  <%= render Railsboot::FormFieldComponent.new(form: form) do |field| %>
    <% field.with_label(for: :email, value: "test@example.com") { "Email" } %>
    <% field.with_email_field(name: :email, class: "is-valid") %>
    <% field.with_validation(valid: true) { "Looks good!" } %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :email, value: "wrongemail") { "Email" } %>
    <% field.with_email_field(name: :email, class: "is-invalid") %>
    <% field.with_validation { "Your email is not formatted correctly" } %>
  <% end %>
<% end %>

<form action="/" accept-charset="UTF-8" method="post">
  <div class="">
    <label class="form-label" for="email_testexample_com">Email</label>
    <input class="form-control is-valid" type="email" name="email" id="email" />
    <div class="text-success mt-1">Looks good!</div>
  </div>
  <div class="mt-3">
    <label class="form-label" for="email_wrongemail">Email</label>
    <input class="form-control is-invalid" type="email" name="email" id="email" />
    <div class="text-danger mt-1">Your email is not formatted correctly</div>
  </div>
</form>

Floating labels

<%= form_with url: "/", authenticity_token: false do |form| %>
  <%= render Railsboot::FormFieldComponent.new(form: form, floating: true) do |field| %>
    <% field.with_label(for: :first_name) { "First Name" } %>
    <% field.with_text_field(name: :first_name, placeholder: "Jane") %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, floating: true, class: "mt-3") do |field| %>
    <% field.with_label(for: :last_name) { "Last Name" } %>
    <% field.with_text_field(name: :last_name, placeholder: "Dow") %>
  <% end %>
<% end %>

<form action="/" accept-charset="UTF-8" method="post">
  <div class="form-floating">
    <input placeholder="Jane" class="form-control" type="text" name="first_name" id="first_name" />
    <label class="form-label" for="first_name">First Name</label>
  </div>
  <div class="form-floating mt-3">
    <input placeholder="Dow" class="form-control" type="text" name="last_name" id="last_name" />
    <label class="form-label" for="last_name">Last Name</label>
  </div>
</form>

Sizes

<%= form_with url: "/", authenticity_token: false do |form| %>
  <%= render Railsboot::FormFieldComponent.new(form: form) do |field| %>
    <% field.with_label(for: :first_name) { "Text Field Large" } %>
    <% field.with_text_field(name: :first_name, size: "lg", placeholder: "I'm a large text field") %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :first_name) { "Text Field Default" } %>
    <% field.with_text_field(name: :first_name, placeholder: "I'm a default text field") %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :first_name) { "Text Field Small" } %>
    <% field.with_text_field(name: :first_name, size: "sm", placeholder: "I'm a small text field") %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :number) { "Select Field Large" } %>
    <% field.with_select(name: :number, size: "lg", choices: ["Ruby", "JavaScript", "C++", "Rust"], options: {prompt: "What's your favorite programming language?"}) %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :number) { "Select Field Default" } %>
    <% field.with_select(name: :number, choices: ["Ruby", "JavaScript", "C++", "Rust"], options: {prompt: "What's your favorite programming language?"}) %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :number) { "Select Field Small" } %>
    <% field.with_select(name: :number, size: "sm", choices: ["Ruby", "JavaScript", "C++", "Rust"], options: {prompt: "What's your favorite programming language?"}) %>
  <% end %>
<% end %>

<form action="/" accept-charset="UTF-8" method="post">
  <div class="">
    <label class="form-label" for="first_name">Text Field Large</label>
    <input placeholder="I'm a large text field" class="form-control form-control-lg" type="text" name="first_name" id="first_name" />
  </div>
  <div class="mt-3">
    <label class="form-label" for="first_name">Text Field Default</label>
    <input placeholder="I'm a default text field" class="form-control" type="text" name="first_name" id="first_name" />
  </div>
  <div class="mt-3">
    <label class="form-label" for="first_name">Text Field Small</label>
    <input placeholder="I'm a small text field" class="form-control form-control-sm" type="text" name="first_name" id="first_name" />
  </div>
  <div class="mt-3">
    <label class="form-label" for="number">Select Field Large</label>
    <select class="form-select form-select-lg" name="number" id="number"><option value="">What's your favorite programming language?</option>
      <option value="Ruby">Ruby</option>
      <option value="JavaScript">JavaScript</option>
      <option value="C++">C++</option>
      <option value="Rust">Rust</option></select>
  </div>
  <div class="mt-3">
    <label class="form-label" for="number">Select Field Default</label>
    <select class="form-select" name="number" id="number"><option value="">What's your favorite programming language?</option>
      <option value="Ruby">Ruby</option>
      <option value="JavaScript">JavaScript</option>
      <option value="C++">C++</option>
      <option value="Rust">Rust</option></select>
  </div>
  <div class="mt-3">
    <label class="form-label" for="number">Select Field Small</label>
    <select class="form-select form-select-sm" name="number" id="number"><option value="">What's your favorite programming language?</option>
      <option value="Ruby">Ruby</option>
      <option value="JavaScript">JavaScript</option>
      <option value="C++">C++</option>
      <option value="Rust">Rust</option></select>
  </div>
</form>

Complex form

<%= form_with url: "/", authenticity_token: false do |form| %>
  <div class="row">
    <%= render Railsboot::FormFieldComponent.new(form: form, class: "col") do |field| %>
      <% field.with_label(for: :first_name, placeholder: "Jane") { "First Name" } %>
      <% field.with_text_field(name: :first_name) %>
    <% end %>

    <%= render Railsboot::FormFieldComponent.new(form: form, class: "col") do |field| %>
      <% field.with_label(for: :last_name, placeholder: "Doe") { "Last Name" } %>
      <% field.with_text_field(name: :last_name) %>
    <% end %>
  </div>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :email, placeholder: "test@example.com") { "Email" } %>
    <% field.with_email_field(name: :email) %>
    <% field.with_caption { "Please enter a valid email address" } %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do |field| %>
    <% field.with_label(for: :password, placeholder: "*****") { "Password" } %>
    <% field.with_password_field(name: :password) %>
    <% field.with_caption { "Must at least be 10 characters long." } %>
  <% end %>

  <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-3") do %>
    <%= render Railsboot::Button::ButtonComponent.new(form: form, text: "Save changes") %>
  <% end %>
<% end %>

<form action="/" accept-charset="UTF-8" method="post">
  <div class="row">
    <div class="col">
      <label placeholder="Jane" class="form-label" for="first_name">First Name</label>
      <input class="form-control" type="text" name="first_name" id="first_name" />
    </div>
    <div class="col">
      <label placeholder="Doe" class="form-label" for="last_name">Last Name</label>
      <input class="form-control" type="text" name="last_name" id="last_name" />
    </div>
  </div>
  <div class="mt-3">
    <label placeholder="test@example.com" class="form-label" for="email">Email</label>
    <input class="form-control" type="email" name="email" id="email" />
    <div class="form-text">Please enter a valid email address</div>
  </div>
  <div class="mt-3">
    <label placeholder="*****" class="form-label" for="password">Password</label>
    <input class="form-control" type="password" name="password" id="password" />
    <div class="form-text">Must at least be 10 characters long.</div>
  </div>
  <div class="mt-3">
    <button type="button" class="btn btn-primary">
      Save changes
    </button>
  </div>
</form>

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
The desired component itself (app/components/railsboot/form_field_component.rb).
A view template (app/components/railsboot/form_field_component.html.erb) for the component unless it's rendered inline.
Any other dependent components such as Slots (just if the component needs those)
Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
A test file for the components (test/components/railsboot/form_field_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Get access You need to purchase a professional license to download this component.

Flash Header