Form styles

‹ Back
Note: Ornament assumes you are using simple_form to generate form fields.

Spacing out fields

All fields are spaced using the inputs class.

The inputs class only affects direct children, so any nested inputs will need another inputs class.

You can space any buttons away from the inputs above by using the actions class.

Error blocks should live inside the inputs class as it will space it out from the fields as well.

Errors were found!
<div class="inputs">
  <div class="panel__error panel--padding">
    Errors were found!
  </div>
  <div class="control-group string required test_form_sample_field_1"><div class="control-group--label"><label class="string required control-label" for="test_form_sample_field_1"><abbr title="required">*</abbr> Sample field 1</label></div><div class="controls"><input class="string required form--medium" required="required" aria-required="true" type="text" name="test_form[sample_field_1]" id="test_form_sample_field_1" /></div></div>
  <div class="control-group string required test_form_sample_field_2"><div class="control-group--label"><label class="string required control-label" for="test_form_sample_field_2"><abbr title="required">*</abbr> Sample field 2</label></div><div class="controls"><input class="string required form--medium" required="required" aria-required="true" type="text" name="test_form[sample_field_2]" id="test_form_sample_field_2" /></div></div>
</div>
<div class="actions">
  <button class="button">Submit</button>
</div>
<div class="inputs">
  <%- unless f.error_notification.blank? -%>
    <%= f.error_notification %>
  <%- end -%>
  <%= f.input :sample_field_1, input_html: { class: "form--medium" } %>
  <%= f.input :sample_field_2, input_html: { class: "form--medium" } %>
</div>
<div class="actions">
  <%= f.button :button, "Submit" -%>
</div>

Form field lengths

Field lengths can be controlled with form--* classes.

You can add these classes to the input directly to only size the input, or you can add the class to the wrapper to size the input along with any hints, labels, error messages etc. that are associated.

The available lengths are:

If you want a thinner input field, you can use .input__tight:


Field modifiers

Placeholders are added with the placeholder input attribute.

<div class="control-group string required test_form_with_placeholder"><div class="control-group--label"><label class="string required control-label" for="test_form_with_placeholder"><abbr title="required">*</abbr> With placeholder</label></div><div class="controls"><input class="string required form--medium" required="required" aria-required="true" placeholder="Example placeholder" type="text" name="test_form[with_placeholder]" id="test_form_with_placeholder" /></div></div>
<%= f.input :with_placeholder, placeholder: "Example placeholder", input_html: { class: "form--medium" } %>

Hints appear inside the label element just after the text for the label and use the class hint-block.

This is a hint message.

<div class="control-group string required test_form_with_hint"><div class="control-group--label"><label class="string required control-label" for="test_form_with_hint"><abbr title="required">*</abbr> With hint</label><p class="hint-block">This is a hint message.</p></div><div class="controls"><input class="string required form--medium" required="required" aria-required="true" type="text" name="test_form[with_hint]" id="test_form_with_hint" /></div></div>
<%= f.input :with_hint, hint: "This is a hint message.", input_html: { class: "form--medium" } %>

Errors appear inline next to labels and use the error-block class.

The wrapper should also get the class of error to colour the label.

<div class="control-group string required form--medium error">
  <div class='control-group--label'>
    <label class="string required control-label" for="modifier-error">
      <abbr title="required">*</abbr> With error<span class='error-block'>can't be blank</span>
    </label>
  </div>
  <div class="controls">
    <input class="string required" id="modifier-error" type="text">
  </div>
</div>
<%= f.input :example, error: "Example Error" -%>

Disabled fields use the disabled input attribute.

<div class="control-group string required disabled test_form_disabled_field"><div class="control-group--label"><label class="string required disabled control-label" for="test_form_disabled_field"><abbr title="required">*</abbr> Disabled field</label></div><div class="controls"><input class="string required disabled form--medium" disabled="disabled" required="required" aria-required="true" type="text" name="test_form[disabled_field]" id="test_form_disabled_field" /></div></div>
<%= f.input :disabled_field, disabled: true, input_html: { class: "form--medium" } -%>

Similarly, read-only fields use the readonly input attribute.

Be aware of the difference between readonly and disabled and use the correct one where appropriate.

<div class="control-group string required readonly test_form_readonly_field"><div class="control-group--label"><label class="string required control-label" for="test_form_readonly_field"><abbr title="required">*</abbr> Readonly field</label></div><div class="controls"><input class="string required readonly form--medium" readonly="readonly" required="required" aria-required="true" type="text" name="test_form[readonly_field]" id="test_form_readonly_field" /></div></div>

<%= f.input :readonly_field, readonly: true, input_html: { class: "form--medium" } %>

jQuery Datepicker can be added by giving your input field the class datepicker.

<div class="control-group string required test_form_datepicker"><div class="control-group--label"><label class="string required control-label" for="test_form_datepicker"><abbr title="required">*</abbr> Datepicker</label></div><div class="controls"><input class="string required datepicker form--medium" required="required" aria-required="true" type="text" name="test_form[datepicker]" id="test_form_datepicker" /></div></div>
<%= f.input :datepicker, input_html: { class: "datepicker form--medium" } %>

Alternatively there's also a datetimepicker using the datetimepicker class.

<div class="control-group string required test_form_datetimepicker"><div class="control-group--label"><label class="string required control-label" for="test_form_datetimepicker"><abbr title="required">*</abbr> Datetimepicker</label></div><div class="controls"><input class="string required datetimepicker form--medium" required="required" aria-required="true" type="text" name="test_form[datetimepicker]" id="test_form_datetimepicker" /></div></div>
<%= f.input :example, input_html: { class: "datetimepicker form--medium" } %>

You can customise the settings of your datepicker by passing in data attributes in the format of data-datepicker-<setting>="". eg. data-datepicker-changemonth="false".


Radios and checkboxes

<div class="control-group check_boxes required test_form_basic_checkboxes"><div class="control-group--label"><label class="check_boxes required control-label"><abbr title="required">*</abbr> Basic checkboxes</label></div><div class="controls"><label class="checkbox"><input class="check_boxes required" type="checkbox" value="true" name="test_form[basic_checkboxes][]" id="test_form_basic_checkboxes_true" /><label class="collection_check_boxes" for="test_form_basic_checkboxes_true">Yes</label></label><label class="checkbox"><input class="check_boxes required" readonly="readonly" type="checkbox" value="false" name="test_form[basic_checkboxes][]" id="test_form_basic_checkboxes_false" /><label class="collection_check_boxes" for="test_form_basic_checkboxes_false">No</label></label><input type="hidden" name="test_form[basic_checkboxes][]" value="" /></div></div>
<%= f.input :basic_checkboxes, as: :check_boxes -%>
<div class="control-group radio_buttons required test_form_basic_radios"><div class="control-group--label"><label class="radio_buttons required control-label"><abbr title="required">*</abbr> Basic radios</label></div><div class="controls"><label class="radio radio radio"><input class="radio_buttons required" required="required" aria-required="true" type="radio" value="true" name="test_form[basic_radios]" id="test_form_basic_radios_true" /><label class="collection_radio_buttons" for="test_form_basic_radios_true">Yes</label></label><label class="radio radio radio"><input class="radio_buttons required" required="required" aria-required="true" readonly="readonly" type="radio" value="false" name="test_form[basic_radios]" id="test_form_basic_radios_false" /><label class="collection_radio_buttons" for="test_form_basic_radios_false">No</label></label></div></div>
<%= f.input :basic_radios, as: :radio_buttons -%>
<div class="control-group check_boxes required test_form_hotizontal_checkboxes form--horizontal"><div class="control-group--label"><label class="check_boxes required control-label"><abbr title="required">*</abbr> Hotizontal checkboxes</label></div><div class="controls"><label class="checkbox"><input class="check_boxes required" type="checkbox" value="true" name="test_form[hotizontal_checkboxes][]" id="test_form_hotizontal_checkboxes_true" /><label class="collection_check_boxes" for="test_form_hotizontal_checkboxes_true">Yes</label></label><label class="checkbox"><input class="check_boxes required" readonly="readonly" type="checkbox" value="false" name="test_form[hotizontal_checkboxes][]" id="test_form_hotizontal_checkboxes_false" /><label class="collection_check_boxes" for="test_form_hotizontal_checkboxes_false">No</label></label><input type="hidden" name="test_form[hotizontal_checkboxes][]" value="" /></div></div>
<%= f.input :hotizontal_checkboxes, as: :check_boxes, wrapper_html: { class: "form--horizontal" } %>
<div class="control-group control-group__boolean boolean optional test_form_single_boolean"><label class="control-group__boolean--wrapper"><div class="control-group__boolean--input checkbox"><input name="test_form[single_boolean]" type="hidden" value="0" /><input class="boolean optional" type="checkbox" value="1" name="test_form[single_boolean]" id="test_form_single_boolean" /></div><div class="control-group__boolean--label"><label class="boolean optional control-label" for="test_form_single_boolean">Single boolean</label></div></label></div>
<%= f.input :example, as: :boolean -%>

Enhanced Radios and checkboxes

You'll notice that radios and checkboxes are styled differently than native controls. If you wish to disable this functionality you will need to comment out or remove the form-enhanced includes in your application.scss and application.js files.


Simple Cocoon Fields

Here is a quick way to markup your cocoon fields in rails to make them look a bit nicer by default.

<div class='nested-fields control-group select'>
  <div class="control-group--label">
    <label class="control-label">My Nested Field</label>
  </div>
  <div class="controls cocoon-field form--medium">
    <div class="cocoon-field--field">
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    </div>
    <div class="cocoon-field--remove">
      <button>Remove field</button>
    </div>
  </div>
</div>
<div class='nested-fields control-group select'>
  <%= f.label :my_nested_field %>
  <%= f.hint :my_nested_field -%>
  <%= f.error :my_nested_field -%>
  <div class="controls cocoon-field form--medium">
    <div class="cocoon-field--field">
      <%= f.input_field :my_nested_field, collection: data_source, label_method: :title, value_method: :id, include_blank: true %>
    </div>
    <div class="cocoon-field--remove">
      <%= link_to_remove_association "Remove", f %>
    </div>
  </div>
</div>

And to space out your cocoon fields, simply update your wrapper to add the inputs field, and add a button class to your add button:

<div class='my_nested_fields inputs'>
  <div class='nested-fields control-group select'>
  <div class="control-group--label">
    <label class="control-label">My Nested Field</label>
  </div>
  <div class="controls cocoon-field form--medium">
    <div class="cocoon-field--field">
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    </div>
    <div class="cocoon-field--remove">
      <button>Remove field</button>
    </div>
  </div>
</div>
  <div class='nested-fields control-group select'>
  <div class="control-group--label">
    <label class="control-label">My Nested Field</label>
  </div>
  <div class="controls cocoon-field form--medium">
    <div class="cocoon-field--field">
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    </div>
    <div class="cocoon-field--remove">
      <button>Remove field</button>
    </div>
  </div>
</div>
  <div class='nested-fields control-group select'>
  <div class="control-group--label">
    <label class="control-label">My Nested Field</label>
  </div>
  <div class="controls cocoon-field form--medium">
    <div class="cocoon-field--field">
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    </div>
    <div class="cocoon-field--remove">
      <button>Remove field</button>
    </div>
  </div>
</div>
  <div>
    <button class="button">Add</button>
  </div>
</div>
<div class='my_nested_fields inputs'>
  <%= f.simple_fields_for :my_nested_fields do |nested_field| -%>
    <%= render 'my_nested_fields', f: nested_field| -%>
  <%- end -%>
  <div>
    <%= link_to_add_association 'Add', f, :my_nested_fields, class: "button" -%>
  </div>
</div>

Limited text fields

You can limit text fields by adding a data-limiter attribute. The value sent to the attribute is the number of characters you want to limit the field to. eg:

<div class="inputs">
  <div class="control-group string required test_form_character_limited_string"><div class="control-group--label"><label class="string required control-label" for="test_form_character_limited_string"><abbr title="required">*</abbr> Character limited string</label></div><div class="controls"><input class="string required form--medium" data-limiter="30" required="required" aria-required="true" type="text" name="test_form[character_limited_string]" id="test_form_character_limited_string" /></div></div>
  <div class="control-group text required test_form_character_limited_text"><div class="control-group--label"><label class="text required control-label" for="test_form_character_limited_text"><abbr title="required">*</abbr> Character limited text</label></div><div class="controls"><textarea class="text required form--medium" data-limiter="200" required="required" aria-required="true" name="test_form[character_limited_text]" id="test_form_character_limited_text">
</textarea></div></div>
</div>
<%= f.input :example, input_html: { data: { limiter: 30 } } -%>

You can limit by words instead of letters by adding in the data-limiter-word attribute.

<div class="inputs">
  <div class="control-group string required test_form_word_limited_string"><div class="control-group--label"><label class="string required control-label" for="test_form_word_limited_string"><abbr title="required">*</abbr> Word limited string</label></div><div class="controls"><input class="string required form--medium" data-limiter="3" data-limiter-word="" required="required" aria-required="true" type="text" name="test_form[word_limited_string]" id="test_form_word_limited_string" /></div></div>
  <div class="control-group text required test_form_word_limited_text"><div class="control-group--label"><label class="text required control-label" for="test_form_word_limited_text"><abbr title="required">*</abbr> Word limited text</label></div><div class="controls"><textarea class="text required form--medium" data-limiter="10" data-limiter-word="" required="required" aria-required="true" name="test_form[word_limited_text]" id="test_form_word_limited_text">
</textarea></div></div>
</div>
<%= f.input :example, input_html: { data: { limiter: 30, limiter_word: "" } } -%>

Both word and character limiter has a "micro" styling option by adding data-limiter-micro to your input.

<div class="inputs">
  <div class="control-group string required test_form_character_limited_string_micro"><div class="control-group--label"><label class="string required control-label" for="test_form_character_limited_string_micro"><abbr title="required">*</abbr> Character limited string micro</label></div><div class="controls"><input class="string required form--medium" data-limiter="30" data-limiter-micro="" required="required" aria-required="true" type="text" name="test_form[character_limited_string_micro]" id="test_form_character_limited_string_micro" /></div></div>
  <div class="control-group text required test_form_character_limited_text_micro"><div class="control-group--label"><label class="text required control-label" for="test_form_character_limited_text_micro"><abbr title="required">*</abbr> Character limited text micro</label></div><div class="controls"><textarea class="text required form--medium" data-limiter="200" data-limiter-micro="" required="required" aria-required="true" name="test_form[character_limited_text_micro]" id="test_form_character_limited_text_micro">
</textarea></div></div>
  <div class="control-group string required test_form_word_limited_string_micro"><div class="control-group--label"><label class="string required control-label" for="test_form_word_limited_string_micro"><abbr title="required">*</abbr> Word limited string micro</label></div><div class="controls"><input class="string required form--medium" data-limiter="3" data-limiter-word="" data-limiter-micro="" required="required" aria-required="true" type="text" name="test_form[word_limited_string_micro]" id="test_form_word_limited_string_micro" /></div></div>
  <div class="control-group text required test_form_word_limited_text_micro"><div class="control-group--label"><label class="text required control-label" for="test_form_word_limited_text_micro"><abbr title="required">*</abbr> Word limited text micro</label></div><div class="controls"><textarea class="text required form--medium" data-limiter="10" data-limiter-word="" data-limiter-micro="" required="required" aria-required="true" name="test_form[word_limited_text_micro]" id="test_form_word_limited_text_micro">
</textarea></div></div>
</div>
<%= f.input :example, input_html: { data: { limiter: 30, limiter_micro: "" } } -%>

Password Revealer

Use data-password-reveal on your input field to add a reveal button. This will toggle the input type between text and password.

<div class="control-group password required test_form_password_revealer form--medium"><div class="control-group--label"><label class="password required control-label" for="test_form_password_revealer"><abbr title="required">*</abbr> Password revealer</label></div><div class="controls"><input data-password-reveal="" class="password required" required="required" aria-required="true" type="password" name="test_form[password_revealer]" id="test_form_password_revealer" /></div></div>
<%= f.input :password_revealer, wrapper_html: { class: "form--medium" }, input_html: { data: { password_reveal: "" } } %>

Password Score

Requires the zxcvbn gem, and this line to be added to your core.js:
//= require zxcvbn-async

Without zxcvbn, it will operate in demo mode as you can see here, which will return a random score on field change.

Be aware if you are using zxcvbn-ruby for server-side validation that the JS and ruby implementations have different results.

<div class="control-group password required test_form_password_score form--medium" data-password-score=""><div class="control-group--label"><label class="password required control-label" for="test_form_password_score"><abbr title="required">*</abbr> Password score</label></div><div class="controls"><input class="password required" required="required" aria-required="true" type="password" name="test_form[password_score]" id="test_form_password_score" /></div></div>
<%= f.input :password_score, wrapper_html: { class: "form--medium", data: { password_score: "" } } %>

You can customise the label under the field by using data-password-score-label. Here's an example with a custom label, using one of the form sizing classes and the password revealer for good measure.

<div class="control-group password required test_form_password_score_custom form--medium" data-password-score="" data-password-score-label="&lt;(&#39;.&#39; &lt;)"><div class="control-group--label"><label class="password required control-label" for="test_form_password_score_custom"><abbr title="required">*</abbr> Password score custom</label></div><div class="controls"><input data-password-reveal="" class="password required" required="required" aria-required="true" type="password" name="test_form[password_score_custom]" id="test_form_password_score_custom" /></div></div>
<%= f.input :password_score_custom, wrapper_html: { class: "form--medium", data: { password_score: "", password_score_label: "<('.' <)" } }, input_html: { data: { password_reveal: "" } } %>

Password score comes with a helper to test if zxcbvn is available: Ornament.C.FormPasswordScore.hasZxcvbn

You can rebind password scores if you need to, for example if the form has been ajaxed in, with Ornament.C.FormPasswordScore.init()


Inline Fields and Field Caps

You can attach caps to fields using the form-inline wrapper class and the form-inline--cap class for the caps.

$
<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_single_cap"><abbr title="required">*</abbr> Single cap</label>  </div>  
  <div class="form-inline">
    <div class="form-inline--cap">$</div>
    <input class="string required" required="required" aria-required="true" type="text" name="test_form[single_cap]" id="test_form_single_cap" />
  </div>
</div>

Caps can appear on either side:

$
.00
<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_double_cap"><abbr title="required">*</abbr> Double cap</label>  </div>  
  <div class="form-inline">
    <div class="form-inline--cap">$</div>
    <input class="string required" required="required" aria-required="true" type="text" name="test_form[double_cap]" id="test_form_double_cap" />
    <div class="form-inline--cap">.00</div>
  </div>
</div>

Caps can be buttons, you don't need a form-inline--cap class.

<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_capped_button"><abbr title="required">*</abbr> Capped button</label>  </div>  
  <div class="form-inline">
    <input class="string required" required="required" aria-required="true" placeholder="my@email.com" type="text" name="test_form[capped_button]" id="test_form_capped_button" />
    <button type="button" class="button">Subscribe</button>
  </div>
</div>

Caps can include icons and work fine with buttons in the mix too:

<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_icon_cap_and_capped_button"><abbr title="required">*</abbr> Icon cap and capped button</label>  </div>  
  <div class="form-inline">
    <div class="form-inline--cap">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 16px; height: 16px; " class="icon-search">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
    <path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
    <path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
  </g>
</svg>
    </div>
    <input class="string required" required="required" aria-required="true" type="text" name="test_form[icon_cap_and_capped_button]" id="test_form_icon_cap_and_capped_button" />
    <button type="button" class="button button__icon icon--white">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16" style="width: 11px; height: 16px; " class="icon-chevron_right">
  <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="translate(-1)"/>
</svg>    </button>
  </div>
</div>

Select menus can also take part in this pattern:

<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_inline_select"><abbr title="required">*</abbr> Inline select</label>  </div>  
  <div class="form-inline">
    <select class="select required" required="required" aria-required="true" name="test_form[inline_select]" id="test_form_inline_select"><option value=""></option>
<option value="1">1 - January</option>
<option value="2">2 - February</option>
<option value="3">3 - March</option>
<option value="4">4 - April</option>
<option value="5">5 - May</option>
<option value="6">6 - June</option>
<option value="7">7 - July</option>
<option value="8">8 - August</option>
<option value="9">9 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option></select>
    <button type="button" class="button">+ Add</button>
  </div>
</div>

You can control the width of them using the regular form--* width classes.

<div class='form--medium control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_short_capped_button"><abbr title="required">*</abbr> Short capped button</label>  </div>  
  <div class="form-inline">
    <input class="string required" required="required" aria-required="true" type="text" name="test_form[short_capped_button]" id="test_form_short_capped_button" />
    <button type="button" class="button button__icon icon--white">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16" style="width: 11px; height: 16px; " class="icon-chevron_right">
  <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="translate(-1)"/>
</svg>    </button>
  </div>
</div>

Do be careful when adding caps and/or sizing your field. By default the input field will grow or shrink to fix the button or caps in the container.

Caps and buttons will not get smaller.

This can mean that the input fields are perfectly happy being reduced to zero pixel widths.

Consider this when implementing caps, you may need to alter the layout at a certain breakpoint to ensure that the user experience isn't poorly affected.

<div class="inputs">
  <div class='form--x-small control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_just_dont"><abbr title="required">*</abbr> Just dont</label>  </div>  
    <div class="form-inline">
      <input class="string required" required="required" aria-required="true" type="text" name="test_form[just_dont]" id="test_form_just_dont" />
      <button type="button" class="button">Subscribe</button>
    </div>
</div></div>

You can use this pattern to create flush inline sibling fields:

<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_inline_siblings"><abbr title="required">*</abbr> Inline siblings</label>  </div>  
  <div class="form-inline">
    <input class="string required" required="required" aria-required="true" placeholder="First Name" type="text" name="test_form[inline_siblings_one]" id="test_form_inline_siblings_one" />
    <input class="string required" required="required" aria-required="true" placeholder="Last Name" type="text" name="test_form[inline_siblings_two]" id="test_form_inline_siblings_two" />
  </div>
</div>

Why not add an input, select menu with a sizing class AND two buttons?

Take note you can also provide a form-* sizing class to the sibling fields to control their width.

Again take responsive considerations if doing something like this.

<div class=' control-group'>  <div class='control-group--label'><label class="string required control-label" for="test_form_capped_sibling_fields_with_buttons"><abbr title="required">*</abbr> Capped sibling fields with buttons</label>  </div>  
  <div class="form-inline">
    <div class="form-inline--cap">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="width: 16px; height: 16px; " class="icon-search">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" class="icon--stroke">
    <path d="M12.375,6.375 C12.375,9.6885 9.6885,12.375 6.375,12.375 C3.0615,12.375 0.375,9.6885 0.375,6.375 C0.375,3.0615 3.0615,0.375 6.375,0.375 C9.6885,0.375 12.375,3.0615 12.375,6.375 L12.375,6.375 Z"/>
    <path d="M10.61715,10.617225 L17.62515,17.625225" stroke-linecap="round"/>
  </g>
</svg>
    </div>
    <input class="string required" required="required" aria-required="true" placeholder="Search terms" type="text" name="test_form[capped_sibling_fields_with_buttons_one]" id="test_form_capped_sibling_fields_with_buttons_one" />
    <select class="select required form--auto" required="required" aria-required="Please select..." name="test_form[capped_sibling_fields_with_buttons_two]" id="test_form_capped_sibling_fields_with_buttons_two"><option value="">Please select...</option>
<option value="Everything">Everything</option>
<option value="Blogs">Blogs</option>
<option value="Pages">Pages</option>
<option value="Events">Events</option></select>
    <button type="button" class="button__confirm">Search</button>
    <button type="button" class="button__cancel">Cancel</button>
  </div>
</div>

Billing to Shipping

Ornament.C.FormBillingToShipping.create is a really easy-to-use helper method to copy data from one group of fields to another group of fields when a checkbox is selected.

All you need to do is first pass in the checkbox selector, then an object of key/value pair selectors matching the fields up.

Combine with show.js to hide the second group of fields when the checkbox is selected for a nicer user experience.

Take a look at the JS tab below to see how it works.

<div class="inputs">
  <div class="control-group string required test_form_billing_address_1 form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_billing_address_1"><abbr title="required">*</abbr> Billing address 1</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[billing_address_1]" id="test_form_billing_address_1" /></div></div>
  <div class="control-group string required test_form_billing_address_2 form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_billing_address_2"><abbr title="required">*</abbr> Billing address 2</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[billing_address_2]" id="test_form_billing_address_2" /></div></div>
  <div class="control-group string required test_form_billing_state form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_billing_state"><abbr title="required">*</abbr> Billing state</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[billing_state]" id="test_form_billing_state" /></div></div>
  <div class="control-group string required test_form_billing_country form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_billing_country"><abbr title="required">*</abbr> Billing country</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[billing_country]" id="test_form_billing_country" /></div></div>
  <div class="control-group control-group__boolean boolean optional test_form_use_billing_address form--medium"><label class="control-group__boolean--wrapper"><div class="control-group__boolean--input checkbox"><input name="test_form[use_billing_address]" type="hidden" value="0" /><input class="boolean optional" type="checkbox" value="1" name="test_form[use_billing_address]" id="test_form_use_billing_address" /></div><div class="control-group__boolean--label"><label class="boolean optional control-label" for="test_form_use_billing_address">Use billing address</label></div></label></div>
  <div class="inputs" data-show="test_form_use_billing_address" data-show-inverse>
    <div class="control-group string required test_form_shipping_address_1 form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_shipping_address_1"><abbr title="required">*</abbr> Shipping address 1</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[shipping_address_1]" id="test_form_shipping_address_1" /></div></div>
    <div class="control-group string required test_form_shipping_address_2 form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_shipping_address_2"><abbr title="required">*</abbr> Shipping address 2</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[shipping_address_2]" id="test_form_shipping_address_2" /></div></div>
    <div class="control-group string required test_form_shipping_state form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_shipping_state"><abbr title="required">*</abbr> Shipping state</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[shipping_state]" id="test_form_shipping_state" /></div></div>
    <div class="control-group string required test_form_shipping_country form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_shipping_country"><abbr title="required">*</abbr> Shipping country</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[shipping_country]" id="test_form_shipping_country" /></div></div>
  </div>
</div>
  Ornament.onLoad(function(){
    Ornament.C.FormBillingToShipping.create("#test_form_use_billing_address", {
      "#test_form_billing_address_1": "#test_form_shipping_address_1",
      "#test_form_billing_address_2": "#test_form_shipping_address_2",
      "#test_form_billing_state": "#test_form_shipping_state",
      "#test_form_billing_country": "#test_form_shipping_country"
    });
  });

Sibling fields

Put two fields next to eachother by making them siblings:

<div class="form-siblings">
  <div class="form-siblings--sibling">
    <div class="control-group select required test_form_sibling_month"><div class="control-group--label"><label class="select required control-label" for="test_form_sibling_month"><abbr title="required">*</abbr> Sibling month</label></div><div class="controls"><select class="select required" required="required" aria-required="true" name="test_form[sibling_month]" id="test_form_sibling_month"><option value=""></option>
<option value="1">1 - January</option>
<option value="2">2 - February</option>
<option value="3">3 - March</option>
<option value="4">4 - April</option>
<option value="5">5 - May</option>
<option value="6">6 - June</option>
<option value="7">7 - July</option>
<option value="8">8 - August</option>
<option value="9">9 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option></select></div></div>
  </div>
  <div class="form-siblings--sibling">
    <div class="control-group select required test_form_sibling_year"><div class="control-group--label"><label class="select required control-label" for="test_form_sibling_year"><abbr title="required">*</abbr> Sibling year</label></div><div class="controls"><select class="select required" required="required" aria-required="true" name="test_form[sibling_year]" id="test_form_sibling_year"><option value=""></option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option></select></div></div>
  </div>
</div>

These can be controlled with the form sizing classes above.

<div class="form-siblings form--medium">
  <div class="form-siblings--sibling">
    <div class="control-group select required test_form_sibling_month_small"><div class="control-group--label"><label class="select required control-label" for="test_form_sibling_month_small"><abbr title="required">*</abbr> Sibling month small</label></div><div class="controls"><select class="select required" required="required" aria-required="true" name="test_form[sibling_month_small]" id="test_form_sibling_month_small"><option value=""></option>
<option value="1">1 - January</option>
<option value="2">2 - February</option>
<option value="3">3 - March</option>
<option value="4">4 - April</option>
<option value="5">5 - May</option>
<option value="6">6 - June</option>
<option value="7">7 - July</option>
<option value="8">8 - August</option>
<option value="9">9 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option></select></div></div>
  </div>
  <div class="form-siblings--sibling">
    <div class="control-group select required test_form_sibling_month_small"><div class="control-group--label"><label class="select required control-label" for="test_form_sibling_month_small"><abbr title="required">*</abbr> Sibling month small</label></div><div class="controls"><select class="select required" required="required" aria-required="true" name="test_form[sibling_month_small]" id="test_form_sibling_month_small"><option value=""></option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option></select></div></div>
  </div>
</div>

Long form example

Minim ex qui amet minim culpa et quis dolore consequat. Veniam sint est adipisicing elit sunt tempor aliquip enim laboris consequat minim. Laborum cupidatat quis irure aute quis esse dolor officia velit.

Non irure aliqua amet consectetur esse sit esse exercitation incididunt duis aute consectetur ullamco. Voluptate Lorem consectetur mollit ipsum occaecat aliqua cillum nisi sunt tempor sint nostrud nostrud voluptate. Incididunt proident adipisicing duis deserunt laboris ipsum dolore aliqua et fugiat nostrud. Elit velit magna ullamco veniam mollit eiusmod est cupidatat.

About you

First and last name

About your submission

Please choose only one.

Please choose as many as you like.

Details

Limited to 10 words only.

Expiry