Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Form Elements

Inputs

%form.form.u-clearfix{role: 'form'}
  %fieldset
    .controlgroup
      %label Alpha
      %input.input.input-wide{type: 'text', value: '.input.input-wide'}
    .controlgroup
      %label Beta
      %input.input{type: 'text', value: '.input (no wide)'}
    .controlgroup
      %label Password
      %input.input{type: 'password', value: 'my voice is my passport please verify me'}
    .controlgroup
      %label Text area
      %textarea textarea
    .controlgroup
      %label Text area wide
      %textarea.input-wide textarea with .input-wide
    .controlgroup
      %label Text area that auto-resizes
      %textarea.autoresize Auto-resize textarea. Type here and watch me grow.
    .controlgroup
      %fieldset
        %legend.legend--radiogroup Checkboxes

        .label-and-checkbox
          %input{type: 'hidden', name: "example[checkbox_1]", value: 0}
          %input#example_checkbox_1{type: 'checkbox', name: "example[checkbox_1]", value: 1}
          %label{for: 'example_checkbox_1'}
            One
        .label-and-checkbox
          %input{type: 'hidden', name: "example[checkbox_2]", value: 0}
          %input#example_checkbox_2{type: 'checkbox', name: "example[checkbox_2]", value: 1}
          %label{for: 'example_checkbox_2'}
            Two
        .label-and-checkbox
          %input{type: 'hidden', name: "example[checkbox_3]", value: 0}
          %input#example_checkbox_3{type: 'checkbox', name: "example[checkbox_3]", value: 1}
          %label{for: 'example_checkbox_3'}
            Three

Checkboxes

Selects

Select boxes use an arrow icon from the icon font for custom styling. It’s important to note that select boxes must be surrounded by .select-container div to appear correctly.

Select box

.controlgroup
  %label Selectbox
  .select-container
    %select.input
      %option Option 1
      %option Option 2
      %option Option 3

.controlgroup
  %label Multi-select
  %select{multiple: true}
    %option Option 1
    %option Option 2
    %option Option 3

Expanders

Expanders are useful for hiding optional subforms or additional content. A comment control is an example of an expander.

Sharing icons example

Toggle switches

Using the following component API call, the toggle should work automatically. For good accessibility, The label consists of the entire full-width area and the label text as well as the icons are clickable and should respond to keyboard events.

In some cases changing the state of the checkbox should submit the surrounding form (implemented using $(this).trigger('submit.rails') ). To enable immediate submit on change, add the class .js-immediate-submit to the .a-toggle-checkbox element.

To manipulate the value of checkboxes on the change event and toggle between 1 and 0 (which is the default for a single Rails checkbox), add the class .js-manipulate-value.

Toggle checkbox

.m-toggle-checkbox-group
  .controlgroup.a-toggle-checkbox
    %label{for: 'checkbox2', class: 'a-toggle-checkbox__label'}
      %span.a-toggle-checkbox__label-text
        %input.input{id: 'checkbox2', type: 'checkbox'}
        %span Alpha
      %span.a-checkbox.is-on

  .controlgroup.a-toggle-checkbox
    %label{for: 'checkbox3', class: 'a-toggle-checkbox__label'}
      %span.a-toggle-checkbox__label-text
        %input.input{id: 'checkbox3', type: 'checkbox'}
        %span Beta
      %span.a-checkbox.is-off

Grouping checkboxes

Use a .m-toggle-checkbox-group to contain multiple checkboxes, to display borders between each checkbox, but not on the last one.

Validation feedback

Add the error class to the form field & label in error to produce the FL Yellow outline. Use the novalidate attribute on the form element if the form has client-side validation, so our own styles takes precedence over browser defaults.
%form.m-form.u-clearfix{role: 'form'}
  .controlgroup
    %label.label-required
      Required input
      %span.is-visually-hidden (required)
    %input.input.input-wide{type: 'text', value: '.input.input-wide', 'aria-required' => true}

  .controlgroup
    %label Happy input
    %input.input.input-wide{type: 'text', value: '.input.input-wide'}

  .controlgroup
    %label Input with error class
    %input.input.error{type: 'text', value: 'input with error :('}
    %label.error Error message within an error label

  .controlgroup
    %label Input with error info class
    %input.input.error{type: 'text', value: 'input with info'}
    %label.error--info Info message within an error--info label
.a-content.a-content--form
  %form.form.u-clearfix{role: 'form'}
    .controlgroup.error
      %label Input in centered form with error class
      %input.input.input-wide.error{type: 'text', value: '.input.input-wide with error :('}
      %label.error Error message within an error label that’s pretty long and likely to wrap.
    .controlgroup.error
      %label Input in centered form with error class
      %input.input.input-wide.error{type: 'text', value: '.input.input-wide with info'}
      %label.error--info Info message within an error label that’s pretty long and likely to wrap.

How to use write error messages

Error messages should be specific, helpful and provide clear instruction on how to fix the error.

Combo Inputs

Combo inputs combine a form field and a submit button for a single line, single field form row.

%form.m-form.u-clearfix{role: 'form'}
  .controlgroup.u-display-flex
    %label.label-required.is-visually-hidden
      Required input
      %span.is-visually-hidden (required)
    %input.input.input-wide.u-no-margin-top{type: 'text', placeholder: 'email address', 'aria-required' => true}
    %a.a-button{href: "#"} Click me
Click me