.mod-example
  .text-input
    input type='text' placeholder='Phasellus in laoreet quam'

.mod-example
  .textfield
    .field
      label for='first_name1' Proin aliquam
      input type='text' id='first_name1' placeholder='Phasellus in laoreet quam'
  .textfield
    .field
      label for='first_name2' Proin aliquam
      input type='text' id='first_name2' value='Fermentum'

.mod-example
  .textfield
    .field
      label for='textarea' Maecenas gravida ex a sed vulputate, sodales.
      textarea id='textarea'

.mod-example
  .textfield
    .field
      label for='first_name1'
        | Pet's name
        span.i-delete.cancel Phasellus viverra
      input type='text' id='first_name1' placeholder='Phasellus in laoreet quam'

.mod-example
  .textfield
    .field
      .help.i-help
      label for='age'
        span Nulla maximus congue dolor sed vestibulum
        .sublabel
          | (Nunc mattis molestie libero, sed vulputate ipsum aliquet vitae.)
      input type='text' id='age' value='dui est'

.mod-example
  .text-input.focused
    input type='text' placeholder='Phasellus in laoreet quam'

.mod-example
  .textfield.focused
    .field
      label for='first_name3' Proin aliquam
      input type='text' id='first_name3' placeholder='Phasellus in laoreet quam'

.mod-example
  .textfield
    .field
      label for='phone' Morbi quis dui
      .security
        input type='tel' id='phone' value='000-000-000'

.mod-example
  .textfield
    .field
      label for='income' Nam consequat maximus turpis, vestibulum tristique metus aliquam eget. Aenean gravida velit suscipit imperdiet aliquam.
      .group.prefix data-prefix='$'
        input type='text' id='income' placeholder='100,000' value='100,000'
  .textfield
    .field
      label for='height1' Phasellus
      .group.postfix data-postfix='lbs.'
        input type='text' id='height1' placeholder='100' value='100'

.mod-example
  .textfield
    .field
      label for='height2' Vivamus
      input type='text' id='height2' placeholder='100' value='100'
    .field
      label for='height3' Nulla
      .group.postfix data-postfix='lbs.'
        input type='text' id='height3' placeholder='100' value='100'

.mod-example
  .textfield.multiple
    label Suspendisse molestie vel
    .group
      input type='text' placeholder='Quam'
      input type='text' placeholder='Sed'
      input type='text' placeholder='Dolor'

.mod-example style='background: #00A4A5; padding: 24px;'
  .textfield.no-border
    .field
      label for='first_name5' Proin aliquam
      input type='text' id='first_name5' placeholder='Phasellus in laoreet quam'