Styleguide

Input

Inputs are components that exist inside of containers. They're designed to let users author information or make choices.

Text Input

Field can't be left blank.
.field
  %label Default
  %input.text-input.input--full{placeholder: "Placeholder", type: "text"}/
.field
  %label Disabled
  %input.text-input.input--full{disabled: "disabled", placeholder: "Placeholder", type: "text"}/
.field.field--invalid.field--required
  %label Error
  %input.text-input.input--full{placeholder: "Placeholder", type: "text"}/
  .field__message Field can't be left blank.

<div class='field'>
  <label>Default</label>
  <input class='text-input input--full' placeholder='Placeholder' type='text'>
</div>
<div class='field'>
  <label>Disabled</label>
  <input class='text-input input--full' disabled placeholder='Placeholder' type='text'>
</div>
<div class='field field--invalid field--required'>
  <label>Error</label>
  <input class='text-input input--full' placeholder='Placeholder' type='text'>
  <div class='field__message'>Field can't be left blank.</div>
</div>
= f.field :default do
  = f.label :default, class: 'block-label'
  = f.text_field :default, class: 'input--full', placeholder: 'Placeholder'
 = f.field :disabled do
  = f.label :disabled, class: 'block-label'
  = f.text_field :disabled, class: 'input--full', placeholder: 'Placeholder', disabled: true

Icon + Text Input

Field can't be left blank.
.field
  %label Default
  .input-group.input-group--full
    .input-group__addon.fa.fa-dollar
    %input.text-input.input--full{placeholder: "Placeholder", type: "text"}/
.field
  %label Disabled
  .input-group.input-group--full
    .input-group__addon.fa.fa-dollar
    %input.text-input.input--full{disabled: "disabled", placeholder: "Placeholder", type: "text"}/
.field.field--invalid.field--required
  %label Error
  .input-group.input-group--full
    .input-group__addon.fa.fa-dollar
    %input.text-input.input--full{placeholder: "Placeholder", type: "text"}/
  .field__message Field can't be left blank.

<div class='field'>
  <label>Default</label>
  <div class='input-group input-group--full'>
    <div class='input-group__addon fa fa-dollar'></div>
    <input class='text-input input--full' placeholder='Placeholder' type='text'>
  </div>
</div>
<div class='field'>
  <label>Disabled</label>
  <div class='input-group input-group--full'>
    <div class='input-group__addon fa fa-dollar'></div>
    <input class='text-input input--full' disabled placeholder='Placeholder' type='text'>
  </div>
</div>
<div class='field field--invalid field--required'>
  <label>Error</label>
  <div class='input-group input-group--full'>
    <div class='input-group__addon fa fa-dollar'></div>
    <input class='text-input input--full' placeholder='Placeholder' type='text'>
  </div>
  <div class='field__message'>Field can't be left blank.</div>
</div>
= f.field :default do
  = f.label :default, class: 'block-label'
  .input-group.input-group--full
    .input-group__addon.fa.fa-dollar
    = f.text_field :default, class: 'input--full', placeholder: 'Placeholder'
= f.field :disabled do
  = f.label :disabled, class: 'block-label'
  .input-group.input-group--full
    .input-group__addon.fa.fa-dollar
    = f.text_field :disabled, class: 'input--full', placeholder: 'Placeholder', disabled: true

Label

.field
  %input.checkbox-input{type: "checkbox"}/
  %label Default
.field
  %label Block
  %input.text-input.input--full{placeholder: "Placeholder", type: "text"}/

<div class='field'>
  <input class='checkbox-input' type='checkbox'>
  <label>Default</label>
</div>
<div class='field'>
  <label>Block</label>
  <input class='text-input input--full' placeholder='Placeholder' type='text'>
</div>
= f.field :default do
  = f.check_box :default, class: 'checkbox-input'
  = f.label :default
= f.field :block do
  = f.label :block
  = f.text_field :block, class: 'input--full', placeholder: 'Placeholder'

Select

Field can't be left blank.
.field
  %label Default
  %select.select-input.input--full
    %option.placeholder{value: ""} Select One
    %option{value: "One"} One
.field
  %label Disabled
  %select.select-input.input--full{disabled: "disabled"}
    %option.placeholder{value: ""} Select One
    %option{value: "One"} One
.field.field--invalid
  %label Error
  %select.select-input.input--full
    %option.placeholder{value: ""} Select One
    %option{value: "One"} One
  .field__message Field can't be left blank.

<div class='field'>
  <label>Default</label>
  <select class='select-input input--full'>
    <option class='placeholder' value=''>Select One</option>
    <option value='One'>One</option>
  </select>
</div>
<div class='field'>
  <label>Disabled</label>
  <select class='select-input input--full' disabled='disabled'>
    <option class='placeholder' value=''>Select One</option>
    <option value='One'>One</option>
  </select>
</div>
<div class='field field--invalid'>
  <label>Error</label>
  <select class='select-input input--full'>
    <option class='placeholder' value=''>Select One</option>
    <option value='One'>One</option>
  </select>
  <div class='field__message'>Field can't be left blank.</div>
</div>
= f.field :default do
  = f.label :default, class: 'block-label'
  = f.select :default, nil, {}, class: 'input--full' do
    %option.placeholder{value: ''} Select One
    = options_for_select(options)
= f.field :disabled do
  = f.label :disabled, class: 'block-label'
  = f.select :disabled, nil, {}, class: 'input--full', disabled: true do
    %option.placeholder{value: ''} Select One
    = options_for_select(options)

Checkbox

Field can't be left blank.
.field
  %input.checkbox-input{type: "checkbox"}/
  %label Default
.field
  %input.checkbox-input{checked: "checked", type: "checkbox"}/
  %label Checked
.field
  %input.checkbox-input{disabled: "disabled", type: "checkbox"}/
  %label Disabled
.field.field--invalid.field--required
  %input.checkbox-input{type: "checkbox"}/
  %label Error
  .field__message Field can't be left blank.

<div class='field'>
  <input class='checkbox-input' type='checkbox'>
  <label>Default</label>
</div>
<div class='field'>
  <input checked class='checkbox-input' type='checkbox'>
  <label>Checked</label>
</div>
<div class='field'>
  <input class='checkbox-input' disabled type='checkbox'>
  <label>Disabled</label>
</div>
<div class='field field--invalid field--required'>
  <input class='checkbox-input' type='checkbox'>
  <label>Error</label>
  <div class='field__message'>Field can't be left blank.</div>
</div>
= f.field :default do
  = f.label :default
  = f.check_box :default, class: 'checkbox-input'
= f.field :checked do
  = f.label :checked
  = f.check_box :checked, class: 'checkbox-input', checked: true
= f.field :disabled do
  = f.label :disabled
  = f.check_box :disabled, class: 'checkbox-input', disabled: true

Radio

Field can't be left blank.
.field
  %input.radio-input{name: "example-radio", type: "radio"}/
  %label Default
.field
  %input.radio-input{checked: "checked", name: "example-radio", type: "radio"}/
  %label Checked
.field
  %input.radio-input{disabled: "disabled", name: "example-radio", type: "radio"}/
  %label Disabled
.field.field--invalid.field--required
  %input.radio-input{name: "example-radio", type: "radio"}/
  %label Error
  .field__message Field can't be left blank.

<div class='field'>
  <input class='radio-input' name='example-radio' type='radio'>
  <label>Default</label>
</div>
<div class='field'>
  <input checked class='radio-input' name='example-radio' type='radio'>
  <label>Checked</label>
</div>
<div class='field'>
  <input class='radio-input' disabled name='example-radio' type='radio'>
  <label>Disabled</label>
</div>
<div class='field field--invalid field--required'>
  <input class='radio-input' name='example-radio' type='radio'>
  <label>Error</label>
  <div class='field__message'>Field can't be left blank.</div>
</div>
= f.field :default do
  = f.label :default
  = f.radio_button :default, class: 'radio-input'
= f.field :checked do
  = f.label :checked
  = f.radio_button :checked, class: 'radio-input', checked: true
= f.field :disabled do
  = f.label :disabled
  = f.radio_button :disabled, class: 'radio-input', disabled: true

Toggle

.field
  %label.toggle-input
    %input{type: "checkbox"}/
    .slider
    .label Turned Off
.field
  %label.toggle-input
    %input{checked: "checked", type: "checkbox"}/
    .slider
    .label Turned On
.field
  %label.toggle-input
    %input{disabled: "disabled", type: "checkbox"}/
    .slider
    .label Disabled

<div class='field'>
  <label class='toggle-input'>
    <input type='checkbox'>
    <div class='slider'></div>
    <div class='label'>Turned Off</div>
  </label>
</div>
<div class='field'>
  <label class='toggle-input'>
    <input checked type='checkbox'>
    <div class='slider'></div>
    <div class='label'>Turned On</div>
  </label>
</div>
<div class='field'>
  <label class='toggle-input'>
    <input disabled type='checkbox'>
    <div class='slider'></div>
    <div class='label'>Disabled</div>
  </label>
</div>
= f.field :default do
  = f.label :default, class: 'toggle-input'
    = f.check_box :default
    = f.div, class: 'slider'
    = f.div, class: 'label'
= f.field :checked do
  = f.label :checked, class: 'toggle-input'
    = f.check_box :checked, checked: true
    = f.div, class: 'slider'
    = f.div, class: 'label'
= f.field :disabled do
  = f.label :disabled, class: 'toggle-input'
    = f.check_box :disabled, disabled: true
    = f.div, class: 'slider'
    = f.div, class: 'label'

Textarea

Field can't be left blank.
.field
  %label Default
  %textarea.textarea-input.input--full{placeholder: "Placeholder", type: "text"}
.field
  %label Disabled
  %textarea.textarea-input.input--full{disabled: "disabled", placeholder: "Placeholder", type: "text"}
.field.field--invalid.field--required
  %label Error
  %textarea.textarea-input.input--full{placeholder: "Placeholder", type: "text"}
  .field__message Field can't be left blank.

<div class='field'>
  <label>Default</label>
  <textarea class='textarea-input input--full' placeholder='Placeholder' type='text'></textarea>
</div>
<div class='field'>
  <label>Disabled</label>
  <textarea class='textarea-input input--full' disabled placeholder='Placeholder' type='text'></textarea>
</div>
<div class='field field--invalid field--required'>
  <label>Error</label>
  <textarea class='textarea-input input--full' placeholder='Placeholder' type='text'></textarea>
  <div class='field__message'>Field can't be left blank.</div>
</div>
= f.field :default do
  = f.label :default, class: 'block-label'
  = f.text_area :default, class: 'input--full', placeholder: 'Placeholder'
= f.field :disabled do
  = f.label :disabled, class: 'block-label'
  = f.text_area :disabled, class: 'input--full', placeholder: 'Placeholder', disabled: true

Backup plan

If these inputs aren't working in your situation, refer to the old Form page in our Style Guide: that should have analogous inputs for all of the types on this page. If you're looking for another input type, you'll have to go with a custom implementation (and then we'll discuss whether or not to include it in the system!).

Contact

Primary designer was Alex Couch; primary developer was Carlos Leon.