p
  | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

.docs-demo.columns
  .column.col-6.col-xs-12
    .form-group
      label.form-label(for="input-example-1") Name
      input#input-example-1.form-input(type="text" placeholder="Name")
    .form-group
      label.form-label(for="input-example-2") Email
      input#input-example-2.form-input(type="email" placeholder="Email")

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

        Name

.docs-demo.columns
  .column.col-6.col-xs-12
    .form-group
      label.form-label(for="input-example-3") Message
      textarea#input-example-3.form-input(placeholder="Textarea" rows="3")

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

        Message

.docs-demo.columns
  .column.col-6.col-xs-12
    .form-group
      select.form-select
        option Choose an option
        option Slack
        option Skype
        option Hipchat
    .form-group
      select.form-select(multiple="")
        option Choose an option
        option Slack
        option Skype
        option Hipchat

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

          Choose an option
          Slack
          Skype
          Hipchat

.docs-demo.columns
  .column.col-6.col-xs-12
    form
      .form-group
        label.form-label Gender
        label.form-radio
          input(type="radio" name="gender" checked="")
          i.form-icon
          |  Male
        label.form-radio
          input(type="radio" name="gender")
          i.form-icon
          |  Female

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

        Gender

           Male

           Female

.docs-demo.columns
  .column.col-6.col-xs-12
    .form-group
      label.form-switch
        input(type="checkbox")
        i.form-icon
        |  Send me emails with news and tips
    .form-group
      label.form-switch
        input(type="checkbox" checked="")
        i.form-icon
        |  Send me emails with news and tips

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

           Send me emails with news and tips

.docs-demo.columns
  .column.col-6.col-xs-12
    .form-group
      label.form-checkbox
        input(type="checkbox")
        i.form-icon
        |  Remember me
    .form-group
      label.form-checkbox
        input(type="checkbox" checked="")
        i.form-icon
        |  Remember me

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

           Remember me

.docs-demo.columns
  .column
    .form-group
      label.form-checkbox
        input#docs-demo-checkbox(type="checkbox")
        i.form-icon
        |  Select all

script.
  document.getElementById("docs-demo-checkbox").indeterminate = true;

p
  | You can change checkbox to indeterminate state by setting the #[code indeterminate] property of input checkboxes to #[code true].

+docs-subheading('forms-inline', 'Inline forms')

.docs-demo.columns
  .column.col-6.col-xs-12
    form
      .form-group
        label.form-radio.form-inline
          input(type="radio" name="gender" checked="")
          i.form-icon
          |  Male
        label.form-radio.form-inline
          input(type="radio" name="gender")
          i.form-icon
          |  Female
      .form-group
        label.form-checkbox.form-inline
          input(type="checkbox")
          i.form-icon
          |  Checkbox 1
        label.form-checkbox.form-inline
          input(type="checkbox" checked="")
          i.form-icon
          |  Checkbox 2

p
  | You can add the #[code form-inline] class to the form components to make them inline in one row.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

           Male

           Female

      <div class="form-group">
        <label class="form-checkbox form-inline">
          <input type="checkbox"><i class="form-icon"></i> Checkbox 1
        </label>
        <label class="form-checkbox form-inline">
          <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
        </label>
      </div>

+docs-subheading('forms-horizontal', 'Horizontal forms')

p
  | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{'
'} container.
  | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout.

.docs-demo.columns
  .column.col-9.col-sm-12
    form.form-horizontal(action="#forms")
      .form-group
        .col-3.col-sm-12
          label.form-label(for="input-example-4") Name
        .col-9.col-sm-12
          input#input-example-4.form-input(type="text" placeholder="Name")
      .form-group
        .col-3.col-sm-12
          label.form-label(for="input-example-5") Email
        .col-9.col-sm-12
          input#input-example-5.form-input(type="email" placeholder="Email")
      .form-group
        .col-3.col-sm-12
          label.form-label Gender
        .col-9.col-sm-12
          label.form-radio
            input(type="radio" name="gender")
            i.form-icon
            |  Male
          label.form-radio
            input(type="radio" name="gender" checked="")
            i.form-icon
            |  Female
      .form-group
        .col-3.col-sm-12
          label.form-label Source
        .col-9.col-sm-12
          select.form-select(multiple="")
            option Slack
            option Skype
            option Hipchat
      .form-group
        .col-9.col-sm-12.col-ml-auto
          label.form-switch
            input(type="checkbox")
            i.form-icon
            |  Send me emails with news and tips
      .form-group
        .col-3.col-sm-12
          label.form-label(for="input-example-6") Message
        .col-9.col-sm-12
          textarea#input-example-6.form-input(placeholder="Textarea" rows="3")
      .form-group
        .col-9.col-sm-12.col-ml-auto
          label.form-checkbox
            input(type="checkbox")
            i.form-icon
            |  Remember me

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

            Name

+docs-subheading('forms-sizes', 'Form sizes')

p
  | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements.

.docs-demo.columns
  .column.col-4.col-xs-12
    label.form-label.label-sm Label
  .column.col-4.col-xs-12
    input.form-input.input-sm(type="text" placeholder="Name")
  .column.col-4.col-xs-12
    select.form-select.select-sm
      option Choose an option
      option Slack
      option Skype
      option Hipchat
  .column.col-4.col-xs-12
    label.form-label.label-lg Label
  .column.col-4.col-xs-12
    input.form-input.input-lg(type="text" placeholder="Name")
  .column.col-4.col-xs-12
    select.form-select.select-lg
      option Choose an option
      option Slack
      option Skype
      option Hipchat

p
  | You can add the #[code input-sm]/#[code input-lg] classes to the input-checkbox, input-radio and input-switch to have different sizes.

+docs-subheading('forms-icons', 'Form icons')

p
  | Spectre Form components has 
  a(href="#icons") Spectre Icons
  |  support.
p
  | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{'<input>'} element.
  | And add the icon with #[code form-icon] class next to the #{'<input>'}.

.docs-demo.columns
  .column.col-4.col-xs-12
    .has-icon-left
      input.form-input.input-sm(type="text" placeholder="Name")
      i.form-icon.icon.icon-arrow-right
  .column.col-4.col-xs-12
    .has-icon-left.tooltip(data-tooltip="Lorem ipsum dolor sit amet")
      input.form-input(type="text" placeholder="Name")
      i.form-icon.icon.icon-arrow-right
  .column.col-4.col-xs-12
    .has-icon-left
      input.form-input.input-lg(type="text" placeholder="Name")
      i.form-icon.icon.icon-arrow-right
  .column.col-4.col-xs-12
    .has-icon-right
      input.form-input.input-sm(type="text" placeholder="Name")
      i.form-icon.icon.icon-check
  .column.col-4.col-xs-12
    .has-icon-right
      input.form-input(type="text" placeholder="Name")
      i.form-icon.icon.icon-check
  .column.col-4.col-xs-12
    .has-icon-right
      input.form-input.input-lg(type="text" placeholder="Name")
      i.form-icon.icon.icon-check

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

p
  | You can use the #[code loading] class for loading or posting state.

.docs-demo.columns
  .column.col-4.col-xs-12
    .has-icon-right
      input.form-input.input-sm(type="text" placeholder="Name")
      i.form-icon.loading
  .column.col-4.col-xs-12
    .has-icon-right
      input.form-input(type="text" placeholder="Name")
      i.form-icon.loading
  .column.col-4.col-xs-12
    .has-icon-right
      input.form-input.input-lg(type="text" placeholder="Name")
      i.form-icon.loading

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

+docs-subheading('forms-input', 'Input types')

.docs-demo.columns
  .column.col-9.col-sm-12
    form.form-horizontal(action="#forms")
      .form-group
        .col-3
          label.form-label(for="input-example-8") Email
        .col-9
          input#input-example-8.form-input(type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
      .form-group
        .col-3
          label.form-label(for="input-example-9") URL
        .col-9
          input#input-example-9.form-input(type="url" placeholder="URL" value="https://github.com/picturepan2/spectre")
      .form-group
        .col-3
          label.form-label(for="input-example-10") Search
        .col-9
          input#input-example-10.form-input(type="search" placeholder="Search")
      .form-group
        .col-3
          label.form-label(for="input-example-11") Tel
        .col-9
          input#input-example-11.form-input(type="tel" placeholder="Tel" value="1-(888)-888-8888")
      .form-group
        .col-3
          label.form-label(for="input-example-12") Password
        .col-9
          input#input-example-12.form-input(type="password" placeholder="Password" value="123456789")
      .form-group
        .col-3
          label.form-label(for="input-example-13") Number
        .col-9
          input#input-example-13.form-input(type="number" placeholder="00" value="66")
      .form-group
        .col-3
          label.form-label(for="input-example-14") Date
        .col-9
          input#input-example-14.form-input(type="date" value="2016-12-31")
      .form-group
        .col-3
          label.form-label(for="input-example-15") Color
        .col-9
          input#input-example-15.form-input(type="color" value="#5755d9")
      .form-group
        .col-3
          label.form-label(for="input-example-16") File
        .col-9
          input#input-example-16.form-input(type="file")

+docs-subheading('forms-input-groups', 'Input groups')

.docs-demo.columns
  .column.col-6.col-xs-12
    .input-group
      input.form-input.input-sm(type="text" placeholder="username")
      select.form-select.select-sm
        option Slack
        option Skype
        option Hipchat
  .column.col-6.col-xs-12
    .input-group
      span.input-group-addon.addon-sm slack.com/
      input.form-input.input-sm(type="text" placeholder="site name")
      button.btn.btn-primary.input-group-btn.btn-sm Submit
  .column.col-6.col-xs-12
    .input-group
      input.form-input(type="text" placeholder="username")
      select.form-select
        option Slack
        option Skype
        option Hipchat
  .column.col-6.col-xs-12
    .input-group
      span.input-group-addon slack.com/
      input.form-input(type="text" placeholder="site name")
      button.btn.btn-primary.input-group-btn Submit
  .column.col-6.col-xs-12
    .input-group
      label.form-switch
        input(type="checkbox")
        i.form-icon
      input.form-input(type="text" placeholder="name")
  .column.col-6.col-xs-12
    .input-group
      label.form-checkbox
        input(type="checkbox")
        i.form-icon
      input.form-input(type="text" placeholder="name")
  .column.col-6.col-xs-12
    .input-group
      input.form-input.input-lg(type="text" placeholder="username")
      select.form-select.select-lg
        option Slack
        option Skype
        option Hipchat
  .column.col-6.col-xs-12
    .input-group
      span.input-group-addon.addon-lg slack.com/
      input.form-input.input-lg(type="text" placeholder="site name")
      button.btn.btn-primary.input-group-btn.btn-lg Submit

p
  | If you want to attach text and button along with an input, add the #[code input-group] class to the input container.
  | And add the #[code input-group-addon] class to the text element and #[code input-group-btn] to the button element.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

        ...

      <!-- large input group -->
      <div class="input-group">
        <span class="input-group-addon addon-lg">...</span>
        <input type="text" class="form-input input-lg" placeholder="...">
      </div>

      <!-- normal input group with button -->
      <div class="input-group">
        <span class="input-group-addon">...</span>
        <input type="text" class="form-input" placeholder="...">
        <button class="btn btn-primary input-group-btn">Submit</button>
      </div>

+docs-subheading('forms-validation', 'Form validation styles')

.docs-demo.columns
  .column.col-9.col-sm-12
    fieldset
      legend Input
      .form-group
        label.form-label(for="input-example-17") Name
        input#input-example-17.form-input.is-success(type="text" placeholder="Name")
        p.form-input-hint The name is valid.
      .form-group.has-error
        label.form-label(for="input-example-18") Password
        input#input-example-18.form-input(type="password" placeholder="Password")
        p.form-input-hint Passwords must have at least 8 characters.
    fieldset
      legend Select
      .form-group
        select.form-select.is-error
          option Choose an option
          option Slack
          option Skype
          option Hipchat
        p.form-input-hint The option is invalid.
      .form-group.has-success
        select.form-select
          option Choose an option
          option Slack
          option Skype
          option Hipchat
        p.form-input-hint The option is available.
    fieldset
      legend Checkbox, Radio and Switch (Error state only)
      .form-group
        label.form-checkbox.is-error
          input(type="checkbox" checked="")
          i.form-icon
          |  I'm not a robot.
      .form-group.has-error
        label.form-radio
          input(type="radio" name="gender" checked="")
          i.form-icon
          |  Male
        label.form-radio
          input(type="radio" name="gender")
          i.form-icon
          |  Female
      .form-group
        label.form-switch.is-error
          input(type="checkbox" checked="")
          i.form-icon
          |  Send me emails with news and tips

p
  | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements.
  | Use the #[code form-input-hint] class to provide form validation success and error messages.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

          Name

The name is invalid.

        <!-- form validation class: is-success -->
        <div class="form-group">
          <label class="form-label" for="input-example-1">Name</label>
          <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
          <p class="form-input-hint">The name is invalid.</p>
        </div>

        <!-- form validation example for checkbox, radio and switch -->
        <div class="form-group">
          <label class="form-checkbox is-error">
            <input type="checkbox">
            <i class="form-icon"></i> Remember me
          </label>
        </div>
      </form>

.docs-demo.columns
  .column.col-9.col-sm-12
    .form-group
      label.form-label(for="input-example-21") Email
      input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$")
    .form-group
      label.form-label(for="input-example-22") Password
      input#input-example-22.form-input(type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$")

p
  | You can use input #[code pattern] attribute to validate the value as well.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

      <!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) -->
      <input class="form-input" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$">

+docs-subheading('forms-disabled', 'Form disabled styles')

p 
  | Add the #[code disabled] attribute to the element or #{'
'} for a disabled form components style.

.docs-demo.columns
  .column.col-6.col-xs-12
    form(action="#forms")
      fieldset(disabled="")
        .form-group
          label.form-label(for="input-example-19") Name
          input#input-example-19.form-input(type="text" placeholder="Name")
        .form-group
          label.form-label Gender
          label.form-radio
            input(type="radio" name="gender" disabled="")
            i.form-icon
            |  Male
          label.form-radio
            input(type="radio" name="gender" disabled="")
            i.form-icon
            |  Female
        .form-group
          select.form-select(disabled="")
            option Choose an option
            option Slack
            option Skype
            option Hipchat
        .form-group
          label.form-switch
            input(type="checkbox" disabled="")
            i.form-icon
            |  Send me emails with news and tips
        .form-group
          label.form-label(for="input-example-20") Message
          textarea#input-example-20.form-input(placeholder="Textarea" rows="3" disabled="")
        .form-group
          label.form-checkbox
            input(type="checkbox" disabled="")
            i.form-icon
            |  Remember me

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

            Name

            Gender

               Male

               Female

              Choose an option
              Slack
              Skype
              Hipchat

               Send me emails with news and tips

            Message

               Remember me

