Simple CSS + JS for user-friendly "floaty" HTML form inputs
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
source
LICENSE
README.md
index.html

README.md

Floaty Form Inputs

Simple CSS + JS for user-friendly "floaty" HTML form inputs

Check out a live demo of an example form.

Here is an image of an example:

Why "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.

Usage

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

HTML

Each input needs the following:

  • 1st: An outer wrapper div with the class "field"
  • 2nd: The input itself with the class "floaty"
  • 3rd: A label that uses the for attribute (which refers to the id of the input)
  • 4th: A div with the class "input-background"
  • ...and it needs to be in that order, because of the way CSS works.

Example HTML

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

Rails Simple Form config

Add this to your Simple Form initializer:

# config/intializers/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|
      end
    end
  end
end

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.