Back to blue

Form Elements

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);

                              Password input with strength validations

                              If you want make password input with validation add class to the field group: .js-password-strong-validation. And take the follow markup.

                              If you want to add a second field (repeat password) and validate that both values are equals, you have to add a data-repeat-psw-input attribute to the first input, with the CSS selector of the second input and wrap both on a parent element.

                              Password strength:

                                    Another independent password validator, without floating labels

                                    Password strength:
                                          <div class="ca-form__group"> <div class="ca-form__group js-form-group js-floating-label-input js-password-strong-validation js-show-hide-password"> <label class="ca-form__label js-label" for="password">Password</label> <div class="ca-form__input-icon-wrapper ca-form__input-icon--clickable"> <input class="ca-form__input" id="password" type="password" name="password-strength" placeholder="Password" required pattern="^(?=.*?\d)(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[^A-Za-z0-9]).{8,}$" data-repeat-psw-input="js-repeat-password" /> <a href="#" class="ca-form__input-icon ca-form__input-icon--clickable js-show-hide-password-btn ca-form__input-icon--show-password ca-form__input-icon--hidden" tabindex="-1"> {% include "frontend/icons/show-password.html" %} {% include "frontend/icons/hide-password.html" %} </a> </div> <div class="ca-form__psw-check-container"> <div class="ca-form__psw-check-container-wrapper"> <div class="ca-form__psw-result"> Password strength: <span class="ca-form__psw-result-label"></span> <div class="ca-form__psw-result-line"> <div class="ca-form__psw-result-line-fill ca-form__psw-result-line-fill--red"> </div> </div> </div> <ul class="ca-form__psw-points"></ul> </div> </div> <ul class="ca-form__error js-errorlist"></ul> </div> <div class="ca-form__group js-form-group js-floating-label-input js-show-hide-password js-repeat-password"> <label class="ca-form__label js-label" for="password-2">Repeat password</label> <div class="ca-form__input-icon-wrapper ca-form__input-icon--clickable"> <input class="ca-form__input" id="password-2" type="password" name="repeat-password" placeholder="Repeat password" required pattern="^(?=.*?\d)(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[^A-Za-z0-9]).{8,}$" /> <a href="#" class="ca-form__input-icon ca-form__input-icon--clickable js-show-hide-password-btn ca-form__input-icon--show-password ca-form__input-icon--hidden" tabindex="-1"> {% include "frontend/icons/show-password.html" %} {% include "frontend/icons/hide-password.html" %} </a> </div> <ul class="ca-form__error js-errorlist"></ul> </div> </div>

                                          Select

                                          This select box is intended to be reused across projects.

                                          All components that inherit the BaseSelect have the capability of dispatching the UserDB event if the data-uapi-event-element attribute is present in the BaseSelect container.

                                          Regular option

                                            <div class="ca-form__group js-form-group js-floating-label-input js-choices" data-uapi-event-element="custom-name"> <label class="ca-form__label">Name</label> <div class="ca-form__select-wrapper"> <select class="ca-form__select"> <option>First option</option> <option>Second option</option> <option>Third option</option> </select> </div> <ul class="ca-form__error js-errorlist"></ul> </div>

                                            Regular option with list search enabled

                                              <div class="ca-form__group js-form-group js-floating-label-input js-choices js-choices-search-enabled" data-uapi-event-element="custom-name"> <label class="ca-form__label">Name</label> <div class="ca-form__select-wrapper"> <select class="ca-form__select"> <option>First option</option> <option>Second option</option> <option>Third option</option> </select> </div> <ul class="ca-form__error js-errorlist"></ul> </div>

                                              Regular option with list search, multiple selections and remove button

                                              Implementation

                                              To implement it you need to add js-choices and js-choices-multiple classes to the wrapper element.

                                              If you want to add the list search to the list, also add the class js-choices-search-enabled.

                                              If you want a placeholder text, set it as a data-placeholder attribute.

                                              You can set and set selected values using the getter and setter data

                                              Since so many options and methods are available, there's an instance of choices.js attached to the select element available at selectElement.choicesjs

                                              Please check Choices.js to see all available options and methods.

                                                <div class="ca-form__group js-form-group js-floating-label-input js-choices js-choices-multiple js-choices-search-enabled" data-placeholder="Enter state" data-uapi-event-element="custom-name"> <label class="ca-form__label js-label">States</label> <div class="ca-form__select-wrapper"> <select class="ca-form__select" multiple> <option>First option</option> <option>Second option</option> <option>Third option</option> </select> </div> <ul class="ca-form__error js-errorlist"></ul> </div>

                                                Mobile fallback option with example error

                                                • You should complete this field
                                                <div class="ca-form__group js-form-group js-floating-label-input js-choices ca-form__group--error" data-uapi-event-element="custom-name"> <label class="ca-form__label js-label">Name</label> <div class="ca-form__select-wrapper"> <select class="ca-form__select"> <option>First option</option> <option>Second option</option> <option>Third option</option> </select> </div> <ul class="ca-form__error js-errorlist"></ul> </div>

                                                Details List

                                                Select your Item
                                                <details class="ca-details"> <summary class="exp-btn ca-details__hdr">Select your Item</summary> <ul role="menu" class="ca-details__lst"> <li role="menuitem"> <a href="#" class="ca-details__lnk">Item 1</a> </li> <li class="ca-details__itm--active" role="menuitem"> <a href="#" class="ca-details__lnk">Item 2</a> </li> <li role="menuitem"> <a href="#" class="ca-details__lnk">Item 3</a> </li> <li role="menuitem"> <a href="#" class="ca-details__lnk">Item 4</a> </li> <li role="menuitem"> <a href="#" class="ca-details__lnk">Item 5</a> </li> <li role="menuitem"> <a href="#" class="ca-details__lnk">Item 6</a> </li> <li role="menuitem"> <a href="#" class="ca-details__lnk">Item 7</a> </li> </ul> </details>

                                                Textarea

                                                Standard

                                                This is a standard textarea element. You can add the ca-form__group--error modifier class to the ca-form__group element to highlight the checkbox in red and display the error message, just like text inputs.


                                                  • You should complete this field
                                                  <div class="ca-form__group js-form-group js-floating-label-input"> <label class="ca-form__label js-label">Tell us about your experience...</label> <textarea class="ca-form__textarea" placeholder="Tell us about your experience..."></textarea> <ul class="ca-form__error js-errorlist"></ul> </div>

                                                  Radio buttons

                                                  Standard

                                                  Standard radio buttons are black. You can include as many radio inputs inside the ca-form__group element as you want, and the options will stack on below of the other, or you can create a ca-form__group element for each option. Remember to match the for attribute of the label with the id attribute of the radio.


                                                    • You should complete this field
                                                    <div class="ca-form__group js-form-group"> <input type="radio" class="ca-form__radio" id="radio_opt1" name="radio_opt1" value="option1" /> <label for="radio_opt1" class="ca-form__radio-label">Option 1</label> <ul class="ca-form__error js-errorlist"></ul> </div>

                                                    Checkbox

                                                    Standard

                                                    This is a standard checkbox. You can add the ca-form__group--error modifier class to the ca-form__group element to highlight the checkbox in red and display the error message, just like text inputs.

                                                    Keep me signed in

                                                      Keep me signed in

                                                      Keep me signed in
                                                      • You should complete this field
                                                      <div class="ca-form__group js-form-group"> <input type="checkbox" class="ca-form__checkbox" id="agree" value="agree" /> <div class="ca-form__checkbox-label"> <label for="agree" class="ca-form__checkbox-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="10 10 20 20"><path fill="#FFF" d="M28.39 16.614l-9.678 9.66c-.373.37-.954.412-1.375.127-.063-.036-.123-.083-.178-.14l-5.544-5.424c-.425-.417-.432-1.106-.013-1.53l1.347-1.37c.418-.424 1.107-.43 1.53-.013l3.44 3.37 7.577-7.562c.42-.42 1.11-.42 1.53 0l1.36 1.357c.422.422.422 1.11 0 1.53" /></svg> </label> Keep me signed in </div> <ul class="ca-form__error js-errorlist"></ul> </div>

                                                      Medium size checkbox

                                                      You can add the ca-form__checkbox-label--size-md modifier class to the ca-form__checkbox-label to make the checkbox bigger on tablet and desktop screens.

                                                      This is a big checkbox

                                                        This is a big checkbox

                                                          This is a big checkbox
                                                          • You should complete this field
                                                          <div class="ca-form__group js-form-group"> <input type="checkbox" class="ca-form__checkbox" id="disclaimer" value="agree" /> <div class="ca-form__checkbox-label ca-form__checkbox-label--size-md"> <label for="disclaimer" class="ca-form__checkbox-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="10 10 20 20"><path fill="#FFF" d="M28.39 16.614l-9.678 9.66c-.373.37-.954.412-1.375.127-.063-.036-.123-.083-.178-.14l-5.544-5.424c-.425-.417-.432-1.106-.013-1.53l1.347-1.37c.418-.424 1.107-.43 1.53-.013l3.44 3.37 7.577-7.562c.42-.42 1.11-.42 1.53 0l1.36 1.357c.422.422.422 1.11 0 1.53" /></svg> </label> This is a big checkbox </div> <ul class="ca-form__error js-errorlist"></ul> </div>

                                                          Checkbox with long text

                                                          For long text as disclaimers, you can wrap the text into a div with a ca-form__checkbox-text class. Additionaly, you can also include titles adding a div with a ca-form__checkbox-title class inside the ca-form__checkbox-text element.

                                                          Subscribe to our Newsletters
                                                          I certify that this review is based on my own experience, and is my genuine opinion of this business and that I have no personal or business relationship with this organization. Zero tolerance policy


                                                            I certify that this review is based on my own experience, and is my genuine opinion of this business and that I have no personal or business relationship with this organization. Zero tolerance policy


                                                              Subscribe to our Newsletters
                                                              I certify that this review is based on my own experience, and is my genuine opinion of this business and that I have no personal or business relationship with this organization. Zero tolerance policy


                                                                I certify that this review is based on my own experience, and is my genuine opinion of this business and that I have no personal or business relationship with this organization. Zero tolerance policy
                                                                  <div class="ca-form__group js-form-group"> <input type="checkbox" class="ca-form__checkbox" id="checkBoxId" value="agree" /> <div class="ca-form__checkbox-label"> <label for="checkBoxId" class="ca-form__checkbox-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="10 10 20 20"><path fill="#FFF" d="M28.39 16.614l-9.678 9.66c-.373.37-.954.412-1.375.127-.063-.036-.123-.083-.178-.14l-5.544-5.424c-.425-.417-.432-1.106-.013-1.53l1.347-1.37c.418-.424 1.107-.43 1.53-.013l3.44 3.37 7.577-7.562c.42-.42 1.11-.42 1.53 0l1.36 1.357c.422.422.422 1.11 0 1.53" /></svg> </label> <div class="ca-form__checkbox-text"> <div class="ca-form__checkbox-title">Title text</div> Long text description or disclaimer</a> </div> </div> <ul class="ca-form__error js-errorlist"></ul> </div>

                                                                  Toggle Switch

                                                                  Another style for checkboxes, a simple toggle switch for on/off, yes/no states. Label text is optional.

                                                                  This component uses a wrapper ca-form__switches around ca-form__group so we can have multiple switches validated if needed.

                                                                  Vertical (default)

                                                                      <div class="ca-form__switches"> <div class="ca-form__group js-form-group"> <div class="ca-form__switch"> <input type="checkbox" name="toggle" /> <label for="toggle"> <span class="ca-form__switch--trck"></span> <span class="ca-form__switch--btn"></span> </label> <ul class="ca-form__error js-errorlist"></ul> </div> </div> <div class="ca-form__group js-form-group"> <div class="ca-form__switch"> <input type="checkbox" name="toggle" /> <label for="toggle"> <span class="ca-form__switch--trck"></span> <span class="ca-form__switch--btn"></span> <span class="ca-form__switch--lbl">Switch label</span> </label> <ul class="ca-form__error js-errorlist"></ul> </div> </div> </div>

                                                                      Horizontal

                                                                      Add the modifier ca-form__switches--hor to ca-form__switches element

                                                                          <div class="ca-form__switches ca-form__switches--hor"> <div class="ca-form__group js-form-group"> <div class="ca-form__switch"> <input type="checkbox" name="toggle" /> <label for="toggle"> <span class="ca-form__switch--trck"></span> <span class="ca-form__switch--btn"></span> <span class="ca-form__switch--lbl">Switch label</span> </label> <ul class="ca-form__error js-errorlist"></ul> </div> </div> <div class="ca-form__group js-form-group"> <div class="ca-form__switch"> <input type="checkbox" name="toggle" /> <label for="toggle"> <span class="ca-form__switch--trck"></span> <span class="ca-form__switch--btn"></span> <span class="ca-form__switch--lbl">Switch label</span> </label> <ul class="ca-form__error js-errorlist"></ul> </div> </div> </div>

                                                                          Required

                                                                          To make a switch required, just add the required attribute to the input element.

                                                                              <div class="ca-form__switches"> <div class="ca-form__group js-form-group"> <div class="ca-form__switch"> <input type="checkbox" name="toggle" required /> <label for="toggle"> <span class="ca-form__switch--trck"></span> <span class="ca-form__switch--btn"></span> <span class="ca-form__switch--lbl">Switch label</span> </label> <ul class="ca-form__error js-errorlist"></ul> </div> </div> <div class="ca-form__group js-form-group"> <div class="ca-form__switch"> <input type="checkbox" name="toggle" required /> <label for="toggle"> <span class="ca-form__switch--trck"></span> <span class="ca-form__switch--btn"></span> <span class="ca-form__switch--lbl">Switch label</span> </label> <ul class="ca-form__error js-errorlist"></ul> </div> </div> </div>

                                                                              Selected

                                                                              To make a switch select, add the checked attribute to the input.

                                                                                  <div class="ca-form__switches"> <div class="ca-form__group js-form-group"> <div class="ca-form__switch"> <input type="checkbox" name="toggle" checked /> <label for="toggle"> <span class="ca-form__switch--trck"></span> <span class="ca-form__switch--btn"></span> <span class="ca-form__switch--lbl">Switch label</span> </label> <ul class="ca-form__error js-errorlist"></ul> </div> </div> <div class="ca-form__group js-form-group"> <div class="ca-form__switch"> <input type="checkbox" name="toggle" checked /> <label for="toggle"> <span class="ca-form__switch--trck"></span> <span class="ca-form__switch--btn"></span> <span class="ca-form__switch--lbl">Switch label</span> </label> <ul class="ca-form__error js-errorlist"></ul> </div> </div> </div>

                                                                                  Datepicker

                                                                                  This date picker is intended to be reusable across projects.

                                                                                    <div class="ca-form__group js-form-group js-floating-label-input ca-datepicker"> <label class="ca-form__label js-label">Please select a date</label> <div class="ca-form__input-icon-wrapper"> <input name="ca-datepicker-input" placeholder="Please select a date" maxlength="10" class="ca-form__input ca-datepicker-input" data-config='{"dateFormat": "d-m-Y"}'> <div class="ca-form__input-icon"> {% include "frontend/icons/datepicker.html" } </div> </div>< <ul class="js-errorlist"></ul> </div>

                                                                                    Any configuration available from Flatpickr can be modified passing an object literal using the data-config attribute on the input as highlighted in the code above



                                                                                    Address Autocomplete

                                                                                    This autocomplete is intended to be reusable across projects.

                                                                                    Implementation

                                                                                    Add the js-address-autocomplete class to the input to make an autocomplete from Google Maps API.

                                                                                      <div class="ca-form__group js-form-group js-floating-label-input"> <label class="ca-form__label js-label">Address</label> <div class="ca-form__input-icon-wrapper ca-form__input-icon-wrapper--left"> <input class="ca-form__input js-address-autocomplete" type="text" placeholder="Address" /> <div class="ca-form__input-icon">{% include "frontend/icons/rebrand/location.html" %}</div> </div> <ul class="ca-form__error js-errorlist"></ul> </div>