Floaty Form Inputs

Floaty form inputs provide a great user experience: combining labels and inputs decreases cognitive load, and unlike with HTML placeholders, the label is always visible.


Or check it out on Github.

Example Floaty Inputs
Click around

The Default states (from top to bottom) are 1. empty, 2. focused, 3. valid, 4. error


Add floaty.css and floaty.js , then format your HTML inputs in the following way...

Each input needs the following:

  <div class="field">
    <input class="floaty" id="first_name" placeholder="Steve">
    <label for="first_name">First Name<label/>
    <div class="input-background"></div>

Rails Simple Form config

Add this to your Simple Form initializer:

# config/initalizers/simple_form.rb
SimpleForm.setup do |config|
  config.wrappers :floaty, tag: "div" do |b|
    b.use :html5
    b.use :placeholder
    b.wrapper tag :div, class: "field" do |c|
      c.use :input, class: "floaty"
      c.use :label
      c.wrapper tag: :div, class: "input-background" do |d|

Then in your view you can use:

# app/views/checkouts/_form.html.erb
<%= simple_form_for :checkout, wrapper: :floaty do |f| %>
  <%= f.input :first_name, placeholder: "Tim" %>
  <%= f.input :last_name, placeholder: "Urban" %>
  <%= f.submit %>
<% end %>

Now your Rails views will render HTML that work out of the box with floaty.css and floaty.js

Thank you to Stripe's Elements Examples for inspiring this approach.