path: root/docs/src/elements/forms.pug

extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'forms'
  - var parent = 'elements'
  - var title = 'Forms - Elements - Spectre.css CSS Framework'
  - var description = 'Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

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