extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'forms'
  - var parent = 'elements'
  - var title = 'Forms - Elements - Spectre.css CSS Framework'
  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'

block docs-content
  +docs-heading('forms', 'Forms')
    include ../_layout/_ad-g.pug

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

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

    .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")
          <!-- form input control -->
          <div class="form-group">
            <label class="form-label" for="input-example-1">Name</label>
            <input class="form-input" type="text" id="input-example-1" placeholder="Name">
          </div>

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

    .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")
          <!-- form textarea control -->
          <div class="form-group">
            <label class="form-label" for="input-example-3">Message</label>
            <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
          </div>

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

    .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")
          <!-- form select control -->
          <div class="form-group">
            <select class="form-select">
              <option>Choose an option</option>
              <option>Slack</option>
              <option>Skype</option>
              <option>Hipchat</option>
            </select>
          </div>

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

    .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")
          <!-- form radio control -->
          <div class="form-group">
            <label class="form-label">Gender</label>
            <label class="form-radio">
              <input type="radio" name="gender" checked>
              <i class="form-icon"></i> Male
            </label>
            <label class="form-radio">
              <input type="radio" name="gender">
              <i class="form-icon"></i> Female
            </label>
          </div>

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

    .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")
          <!-- form switch control -->
          <div class="form-group">
            <label class="form-switch">
              <input type="checkbox">
              <i class="form-icon"></i> Send me emails with news and tips
            </label>
          </div>

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

    .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")
          <!-- form checkbox control -->
          <div class="form-group">
            <label class="form-checkbox">
              <input type="checkbox">
              <i class="form-icon"></i> Remember me
            </label>
          </div>

    .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")
          <div class="form-group">
            <label class="form-radio form-inline">
              <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
            </label>
            <label class="form-radio form-inline">
              <input type="radio" name="gender"><i class="form-icon"></i> Female
            </label>
          </div>

          <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 #{'<form>'} 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")
          <form class="form-horizontal">
            <div class="form-group">
              <div class="col-3 col-sm-12">
                <label class="form-label" for="input-example-1">Name</label>
              </div>
              <div class="col-9 col-sm-12">
                <input class="form-input" type="text" id="input-example-1" placeholder="Name">
              </div>
            </div>
            <!-- form structure -->
          </form>

    +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")
          <!-- form input with Spectre icon -->
          <div class="has-icon-left">
            <input type="text" class="form-input" placeholder="...">
            <i class="form-icon icon icon-check"></i>
          </div>

    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")
          <!-- form input with loading icon -->
          <div class="has-icon-right">
            <input type="text" class="form-input" placeholder="...">
            <i class="form-icon loading"></i>
          </div>

    +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")
          <!-- normal input group -->
          <div class="input-group">
            <span class="input-group-addon">...</span>
            <input type="text" class="form-input" placeholder="...">
          </div>

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

            <!-- 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 Email -->
          <input class="form-input" type="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$">

          <!-- 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 #{'<fieldset>'} 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")
          <form action="#forms">
            <fieldset disabled>
              <div class="form-group">
                <label class="form-label" for="input-example-19">Name</label>
                <input class="form-input" type="text" id="input-example-19" placeholder="Name">
              </div>
              <div class="form-group">
                <label class="form-label">Gender</label>
                <label class="form-radio">
                  <input type="radio" name="gender" disabled>
                  <i class="form-icon"></i> Male
                </label>
                <label class="form-radio">
                  <input type="radio" name="gender" disabled>
                  <i class="form-icon"></i> Female
                </label>
              </div>
              <div class="form-group">
                <select class="form-select" disabled>
                  <option>Choose an option</option>
                  <option>Slack</option>
                  <option>Skype</option>
                  <option>Hipchat</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-switch">
                  <input type="checkbox" disabled>
                  <i class="form-icon"></i> Send me emails with news and tips
                </label>
              </div>
              <div class="form-group">
                <label class="form-label" for="input-example-20">Message</label>
                <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
              </div>
              <div class="form-group">
                <label class="form-checkbox">
                  <input type="checkbox" disabled>
                  <i class="form-icon"></i> Remember me
                </label>
              </div>
            </fieldset>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug