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

<div class='field'>
  <label class='block-label'>Default</label>
  <input class='text-input input--full' placeholder='Placeholder' type='text'>
</div>
<div class='field'>
  <label class='block-label'>Disabled</label>
  <input class='text-input input--full' disabled placeholder='Placeholder' type='text'>
</div>
<div class='field field--invalid field--required'>
  <label class='block-label'>Error</label>
  <input class='text-input input--full' placeholder='Placeholder' type='text'>
  <div class='field__message'>can't be 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

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

<div class='field'>
  <label class='block-label'>Default</label>
  <div class='input-group input-group--full'>
    <div class='input-group__addon'>$</div>
    <input class='text-input input--full' placeholder='Placeholder' type='text'>
  </div>
</div>
<div class='field'>
  <label class='block-label'>Disabled</label>
  <div class='input-group input-group--full'>
    <div class='input-group__addon'>$</div>
    <input class='text-input input--full' disabled placeholder='Placeholder' type='text'>
  </div>
</div>
<div class='field field--invalid field--required'>
  <label class='block-label'>Error</label>
  <div class='input-group input-group--full'>
    <div class='input-group__addon'>$</div>
    <input class='text-input input--full' placeholder='Placeholder' type='text'>
  </div>
  <div class='field__message'>can't be blank</div>
</div>

= f.field :default do
  = f.label :default, class: 'block-label'
  .input-group.input-group--full
    .input-group__addon $
    = 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 $
    = f.text_field :disabled, class: 'input--full', placeholder: 'Placeholder', disabled: true

.field
  %input.checkbox-input{type: "checkbox"}/
  %label Default
.field
  %label.block-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 class='block-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'

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

<div class='field'>
  <label class='block-label'>Default</label>
  <textarea class='textarea-input input--full' placeholder='Placeholder' type='text'></textarea>
  <div class='field__meta'>Help text for the input</div>
</div>
<div class='field'>
  <label class='block-label'>Disabled</label>
  <textarea class='textarea-input input--full' disabled placeholder='Placeholder' type='text'></textarea>
</div>
<div class='field field--invalid field--required'>
  <label class='block-label'>Error</label>
  <textarea class='textarea-input input--full' placeholder='Placeholder' type='text'></textarea>
  <div class='field__message'>can't be 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

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

<div class='field'>
  <label class='block-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 class='block-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 class='block-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'>can't be 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)

.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 can't be 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'>can't be 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

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

<div class='field'>
  <input class='radio-input' type='radio'>
  <label>Default</label>
</div>
<div class='field'>
  <input checked class='radio-input' type='radio'>
  <label>Checked</label>
</div>
<div class='field'>
  <input class='radio-input' disabled type='radio'>
  <label>Disabled</label>
</div>
<div class='field field--invalid field--required'>
  <input class='radio-input' type='radio'>
  <label>Error</label>
  <div class='field__message'>can't be 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

.radio-input-grid.xs-mb1
  .radio-input-grid__row
    .radio-input-grid__column
      %input#radio-input-grid-example-1.radio-input{name: "radio-input-grid-example", type: "radio", value: "1"}/
      %label{for: "radio-input-grid-example-1"} 1
    .radio-input-grid__column
      %input#radio-input-grid-example-2.radio-input{name: "radio-input-grid-example", type: "radio", value: "2"}/
      %label{for: "radio-input-grid-example-2"} 2
    .radio-input-grid__column
      %input#radio-input-grid-example-3.radio-input{name: "radio-input-grid-example", type: "radio", value: "3"}/
      %label{for: "radio-input-grid-example-3"} 3
    .radio-input-grid__column
      %input#radio-input-grid-example-4.radio-input{name: "radio-input-grid-example", type: "radio", value: "4"}/
      %label{for: "radio-input-grid-example-4"} 4
    .radio-input-grid__column
      %input#radio-input-grid-example-5.radio-input{name: "radio-input-grid-example", type: "radio", value: "5"}/
      %label{for: "radio-input-grid-example-5"} 5
  .radio-input-grid__row
    .radio-input-grid__column
      %input#radio-input-grid-example-6.radio-input{name: "radio-input-grid-example", type: "radio", value: "6"}/
      %label{for: "radio-input-grid-example-6"} 6
    .radio-input-grid__column
      %input#radio-input-grid-example-7.radio-input{name: "radio-input-grid-example", type: "radio", value: "7"}/
      %label{for: "radio-input-grid-example-7"} 7
    .radio-input-grid__column
      %input#radio-input-grid-example-8.radio-input{name: "radio-input-grid-example", type: "radio", value: "8"}/
      %label{for: "radio-input-grid-example-8"} 8
    .radio-input-grid__column
      %input#radio-input-grid-example-9.radio-input{name: "radio-input-grid-example", type: "radio", value: "9"}/
      %label{for: "radio-input-grid-example-9"} 9
    .radio-input-grid__column
      %input#radio-input-grid-example-10.radio-input{name: "radio-input-grid-example", type: "radio", value: "10"}/
      %label{for: "radio-input-grid-example-10"} 10

<div class='radio-input-grid xs-mb1'>
  <div class='radio-input-grid__row'>
    <div class='radio-input-grid__column'>
      <input class='radio-input' id='radio-input-grid-example-1' name='radio-input-grid-example' type='radio' value='1'>
      <label for='radio-input-grid-example-1'>1</label>
    </div>
    <div class='radio-input-grid__column'>
      <input class='radio-input' id='radio-input-grid-example-2' name='radio-input-grid-example' type='radio' value='2'>
      <label for='radio-input-grid-example-2'>2</label>
    </div>
    <div class='radio-input-grid__column'>
      <input class='radio-input' id='radio-input-grid-example-3' name='radio-input-grid-example' type='radio' value='3'>
      <label for='radio-input-grid-example-3'>3</label>
    </div>
    <div class='radio-input-grid__column'>
      <input class='radio-input' id='radio-input-grid-example-4' name='radio-input-grid-example' type='radio' value='4'>
      <label for='radio-input-grid-example-4'>4</label>
    </div>
    <div class='radio-input-grid__column'>
      <input class='radio-input' id='radio-input-grid-example-5' name='radio-input-grid-example' type='radio' value='5'>
      <label for='radio-input-grid-example-5'>5</label>
    </div>
  </div>
  <div class='radio-input-grid__row'>
    <div class='radio-input-grid__column'>
      <input class='radio-input' id='radio-input-grid-example-6' name='radio-input-grid-example' type='radio' value='6'>
      <label for='radio-input-grid-example-6'>6</label>
    </div>
    <div class='radio-input-grid__column'>
      <input class='radio-input' id='radio-input-grid-example-7' name='radio-input-grid-example' type='radio' value='7'>
      <label for='radio-input-grid-example-7'>7</label>
    </div>
    <div class='radio-input-grid__column'>
      <input class='radio-input' id='radio-input-grid-example-8' name='radio-input-grid-example' type='radio' value='8'>
      <label for='radio-input-grid-example-8'>8</label>
    </div>
    <div class='radio-input-grid__column'>
      <input class='radio-input' id='radio-input-grid-example-9' name='radio-input-grid-example' type='radio' value='9'>
      <label for='radio-input-grid-example-9'>9</label>
    </div>
    <div class='radio-input-grid__column'>
      <input class='radio-input' id='radio-input-grid-example-10' name='radio-input-grid-example' type='radio' value='10'>
      <label for='radio-input-grid-example-10'>10</label>
    </div>
  </div>
</div>

= f.field :default do
  - items = (1..10).to_a.map { |text| OpenStruct.new(value: text, text: text) }
  - defaults = { range: 5 }
  .radio-input-grid__parent
    = f.radio_input_grid :default, items, :value, :text, defaults

%input#upload-button.xs-none{type: "file"}/
%label{for: "upload-button"}
  .button.button--secondary Upload
  %img.icon.icon--file.xs-mrlh0{src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"}/
  file.png

<input class='xs-none' id='upload-button' type='file'>
<label for='upload-button'>
  <div class='button button--secondary'>Upload</div>
  <img class='icon icon--file xs-mrlh0' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'>
  file.png
</label>