Form Elements

Available Sass Variables and default values

$form-field-gutter: 10px
$form-field-padding: 10px 12px
$form-field-font-size: $font-size
$form-field-line-height: $font-size
$form-field-color: $text-color-dark
$form-field-placeholder-color: $silver
$form-field-border-color: $base-border-color
$form-field-border-color-focus: $brand-primary
$form-field-background-color: $wt
$form-field-background-color-focus: $wt

$form-label-padding: 0
$form-label-font-weight: $font-normal
$form-label-font-size: $font-size
$form-label-color: $text-color

Examples

Basic Input syntax:

= text_field(:model, :attribute, placeholder: "Placeholder text here")
= text_area(:model, :attribute, placeholder: "Placeholder text here")

Rows & Columns

Inside your form tag, rows need a class of .form-row

Available column classes include: .col-100, .col-80, .col-75, .col-66, .col-60, .col-50, .col-40, .col-33, col-25, .col-20

= form_tag("#")
  .form-row
    .col-100
      = text_field(:model, :attribute, placeholder: "Placeholder text here")
  .form-row
    .col-50
      = text_field(:model, :attribute, placeholder: "Placeholder text here")
    .col-50
      = text_field(:model, :attribute, placeholder: "Placeholder text here")

Simple Form

Use Simple Form field helpers just as you would any other field helper.

.form-row
  .col-50
    = f.input :user, :first_name
  .col-50
    = f.input :user, :last_name

Fields with Errors

Wrappers of fields with errors are given the class `.has-error` by Simple Form.

Disabled Fields

Date Fields

Below is a basic datepicker using Pikaday. The default plugin has been wrapped (and overridden). Any fields with type='date' will be initialized as a datepicker. The gray boxes below the inputs are only displayed on this components page. They contain the values that would be submitted to the server.

Data attributes: year-range

All date fields support a year-range data attribute. This must be an integer, indicating the number of years in the future and past, or an array [1900, 2005].

= f.input :birthday, as: :datetime, html5: true, label: false, input_html: {placeholder: "Birthday", data: {year_range: "[1900,2018]"}}

simple_form example:

= f.input :date, html5: true, input_html: {value: f.object.date&.to_time&.iso8601 || nil}

Date+Time Fields

Below is a basic date+time picker using Pikaday. The default plugin has been wrapped (and overridden). Any fields with type='datetime-local' will be initialized as a date+time picker. The gray boxes below the inputs are only displayed on this components page. They contain the values that would be submitted to the server.

Search Fields

Search fields are much like any other field, but with a type='search' attribute. Depending on the browser, search fields may offer previous search autocomplete, clear buttons, search icons, and other things.

Select Fields

File Input Fields

Checkboxes

Nothing special should be required to get custom checkboxes. By default, all checkboxes will appear as below.

Basic Checkbox

= check_box :model, :attribute

Checkbox with Clickable Label

= check_box :user, :is_happy
= label :user, :is_happy, "I am Happy"

Radio Buttons

Nothing special should be required to get custom radio buttons either. By default, all radio buttons will appear as below.

Basic Radio Button

.button-group
  = radio_button :user, :favorite_color, :blue
  = label :user, :favorite_color, "Blue", value: :blue
  = radio_button :user, :favorite_color, :green
  = label :user, :favorite_color, "Green", value: :green
  = radio_button :user, :favorite_color, :red
  = label :user, :favorite_color, "Red", value: :red

Inline Radio Radio Button - just add .inline-radio to a wrapper around the radios

.button-group.inline-radio
  = radio_button :user, :favorite_color, :blue
  = label :user, :favorite_color, "Blue", value: :blue
  = radio_button :user, :favorite_color, :green
  = label :user, :favorite_color, "Green", value: :green
  = radio_button :user, :favorite_color, :red
  = label :user, :favorite_color, "Red", value: :red