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" } %>

Datepicker (jQuery UI)

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"><input type="hidden" name="test_form[basic_checkboxes][]" value="" /><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></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"><input type="hidden" name="test_form[basic_radios]" value="" /><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"><input type="hidden" name="test_form[hotizontal_checkboxes][]" value="" /><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></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.

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="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>
<option value="2029">2029</option>
<option value="2030">2030</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="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>
<option value="2029">2029</option>
<option value="2030">2030</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