Back to blue

Form Elements

The light version of the forms contains only styling for text inputs and the most basic functionality. The final goal is having a lightweight version of the css and js and don't include a lot of unneccessary code on all the pages.

Messages

Messages box can display one or more errors. The ca-message class can also be used on a div tag with text content inside.

  • This is an error message
  • This is an error message
  • This is another error message
<ul class="ca-message"> <li>This is an error message</li> <li>This is another error message</li> </ul>

Inputs

Make sure to include the CSS and JS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_sg_forms.css') }}" /> <script src="{{ static("js/ca_styleguide_forms.js") }}"></script>

Standard

The most basic kind of input text.

  • ca-form__label: The label of the input element. It's invisible until the input field has any content or the user focus it. To make it work, you must add the js-label class to the label, and js-floating-label-input to the parent element. If you want to make the label visible all the time, just remove the 2 classes mentioned before, and add the ca-form__label--visible class modifier to the label element.
  • ca-form__error: The warning message to display any error on that input.
    <div class="ca-form__group js-form-group js-floating-label-input"> <label class="ca-form__label js-label">First name</label> <input class="ca-form__input" type="text" placeholder="Placeholder" /> <ul class="ca-form__error js-errorlist"></ul> </div>

    Black variation

      <div class="ca-form__group ca-form__group--black js-form-group js-floating-label-input"> <label class="ca-form__label js-label">First name</label> <input class="ca-form__input" type="text" placeholder="Placeholder" /> <ul class="ca-form__error js-errorlist"></ul> </div>

      Transparent variation

      The input version with transparent background.

      If necessary, it's possible add this modifier and ca-form__group--black at the same time. In this case the input will be white, like the example below.

        <div class="ca-form__group ca-form__group--black ca-form__group--transparent js-form-group js-floating-label-input"> <label class="ca-form__label js-label">First name</label> <input class="ca-form__input" type="text" placeholder="Placeholder" /> <ul class="ca-form__error js-errorlist"></ul> </div>

        Alternative

        The most alternative kind of input text.

        • ca-form__label: The label of the input element. It's invisible until the input field has any content or the user focus it. To make it work, you must add the js-label class to the label, and js-floating-label-input to the parent element. If you want to make the label visible all the time, just remove the 2 classes mentioned before, and add the ca-form__label--visible class modifier to the label element.
        • ca-form__error: The warning message to display any error on that input.
          <div class="ca-form__group js-form-group js-floating-label-input"> <label class="ca-form__label js-label">First name</label> <input class="ca-form__input ca-form__input--alt" type="text" placeholder="Placeholder" /> <ul class="ca-form__error js-errorlist"></ul> </div>

          Required inputs

          If you add the ca-form__group--required modifier class to the ca-form__group element, an * will be automatically displayed next to the label

            <div class="ca-form__group ca-form__group--required js-form-group js-floating-label-input"> <label class="ca-form__label js-label">First name</label> <input class="ca-form__input" type="text" required placeholder="Placeholder*" /> <ul class="ca-form__error js-errorlist"></ul> </div>

            Errors

            If you add the ca-form__group--error modifier class to the ca-form__group element, the ca-form__error element will be displayed with the error message, and the input will be highlighted in red.

            • You should complete this field
            • You should complete this field also
            <div class="ca-form__group ca-form__group--required ca-form__group--error js-form-group js-floating-label-input"> <label class="ca-form__label js-label">Name</label> <input type="text" class="ca-form__input" placeholder="Name*" required /> <ul class="ca-form__error js-errorlist"> <li class="ca-form__error-item">You should complete this field</li> <li class="ca-form__error-item">You should complete this field also</li> </ul> </div>

            Input with icon

            To display an icon on the right of the input field, you need to add a wrapper with the ca-form__input-icon-wrapper class to the input field and the SVG icon. You need to add a ca-form__input-icon class to the SVG.

              <div class="ca-form__group js-form-group js-floating-label-input"> <label class="ca-form__label js-label">Email</label> <div class="ca-form__input-icon-wrapper "> <input class="ca-form__input" type="text" name="inputName" id="inputID" placeholder="Placeholder" /> <div class="ca-form__input-icon">{% include "base/common/icons/search.html" %}</div> </div> <ul class="ca-form__error js-errorlist"></ul> </div>

              Clickable icon

              If you want a clickable icon, you must wrap the icon into an <a> tag or other element, with a ca-form__input-icon class and the ca-form__input-icon--clickable modifier class.

                <div class="ca-form__group js-form-group js-floating-label-input"> <label class="ca-form__label js-label">Search</label> <div class="ca-form__input-icon-wrapper"> <input class="ca-form__input" type="text" name="inputName" id="inputId" placeholder="Placeholder" /> <button href="#" class="ca-btn--link ca-form__input-icon ca-form__input-icon--clickable" {% include "frontend/icons/search.html" %} </button> </div> <ul class="ca-form__error js-errorlist"></ul> </div>

                Clickable icon black variation

                  <div class="ca-form__group ca-form__group--black js-form-group js-floating-label-input"> <label class="ca-form__label js-label">Search</label> <div class="ca-form__input-icon-wrapper"> <input class="ca-form__input" type="text" name="inputName" id="inputId" placeholder="Placeholder" /> <button href="#" class="ca-btn--link ca-form__input-icon ca-form__input-icon--clickable" {% include "frontend/icons/search.html" %} </button> </div> <ul class="ca-form__error js-errorlist"></ul> </div>

                  Left-aligned icon

                  To display the icon on the left of the input, you need to add the ca-form__input-icon-wrapper--left modifier class to the ca-form__input-icon-wrapper element.

                    <div class="ca-form__group js-form-group js-floating-label-input"> <label class="ca-form__label js-label">Email</label> <div class="ca-form__input-icon-wrapper ca-form__input-icon-wrapper--left"> <input class="ca-form__input" type="text" name="inputName" id="inputID" placeholder="Placeholder" /> <div class="ca-form__input-icon">{% include "base/common/icons/search.html" %}</div> </div> <ul class="ca-form__error js-errorlist"></ul> </div>

                    Validations

                    HTML5 validations are running on required input fields and non-required inputs with a pattern="" attribute on the blur event. Also, live validations (on keyup event) run when the input has already an error on it, to let the user know when the input is valid while typing.

                    To reinforce the default validations, a pattern="" attribute can be added with a regular expression.

                    • Email: (to avoid Chrome to accept as valid an email without extension) [\w\.%+-]+@[\w.-]+\.[a-zA-Z]{2,4}$ Password: To match the strength requirements ^(?=.*?\d)(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[^A-Za-z0-9]).{8,}$ Phone: Only numbers and the following characters: ( ) . - + [0-9.\(\)\+\-\s]*

                    Additionally, you can add custom validations using setCustomValidity(). If you need to trigger the validation (For displaying or deleting errors), you can dispatch a custom event called: 'com.consumeraffairs.styleguide.input.validate':

                    //var el = input element var evObj = document.createEvent('Events'); evObj.initEvent('com.consumeraffairs.styleguide.input.validate', true, false); el.dispatchEvent(evObj);

                              Initiating elements on demand

                              By default, the input elments are initialized when the page loads, but you can initalize the elements dispatching events.

                              To initialize:

                              Multiple elements - dispatch the event com.consumeraffairs.styleguide.formsLight.initAllInputs and the selector for the multiple inputs.

                              var event = new CustomEvent('com.consumeraffairs.styleguide.formsLight.initAllInputs', { 'detail': '.multiple-inputs' });

                              Floating label input - dispatch the event com.consumeraffairs.styleguide.formsLight.initFloatingLabelInput and the selector for the element.

                              var event = new CustomEvent('com.consumeraffairs.styleguide.formsLight.initFloatingLabelInput', { 'detail': '.floating-element' });

                              Base input - dispatch the event com.consumeraffairs.styleguide.formsLight.initBaseInput and the selector for the element.

                              var event = new CustomEvent('com.consumeraffairs.styleguide.formsLight.initBaseInput', { 'detail': '.base-element' });

                              Example 1 - Init multiple inputs


                                  Example 2 - Init floating label input


                                    Example 3 - Init base input