Go to rebrand

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_styleguide_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>

    Shadow alternative

    For this alternative design, you must add the ca-form__input--shadowed class to the input element

      <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--shadowed" 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"> <label class="ca-form__label">Name</label> <div class="ca-form__input-icon-wrapper"> <input type="text" class="ca-form__input" 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" /> <a href="#" class="ca-form__input-icon ca-form__input-icon--clickable" {% include "frontend/icons/search.html" %} </a> </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>

                  Alternative color icon

                  You can change the icon color to blue by adding a ca-form__input-icon-wrapper--alt-color 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">Label</label> <div class="ca-form__input-icon-wrapper ca-form__input-icon-wrapper--alt-color"> <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);

                              Custom validations

                              Custom validations can be added for additional validations rules that can't be handled by default HTML5 validations or a pattern.

                              In order to add a new validation, you need to add the new validator type into validationfactory.es6. Eg:

                              import ZipCodeValidator from './zipcodevalidator.es6'; import NewValidator from './newvalidator.es6'; export default class ValidationManager { static get DATA_VALIDATOR_LIST() { return { 'zip-code': ZipCodeValidator, 'new-validator': NewValidator, }; } [...]

                              And and add a data-validate attribute to the element container with the same value than the key:

                              <div class="ca-form__group js-form-group js-floating-label-input" data-validate="new-validator"> <label class="ca-form__label js-label">Zip code</label> <div class="ca-form__input-icon-wrapper ca-form__input-icon-wrapper--left"> <input class="ca-form__input" type="text" required placeholder="Zip code" pattern="\d{5}" title="Please type a 5 digit number" /><div class="ca-form__input-icon"> {% include "frontend/icons/location-icon.html" %} </div> </div> <ul class="ca-form__error js-errorlist"> </ul> </div>

                              The constructor of the new validator will receive by parameter:

                              • element: Input container (the one with the data-validate attribute)
                              • input: Input element
                              • validator: the validator function - set/removes errors from the input and dispatch the event for display it

                              The input and blur eventListeners are added by the validationManager. You can add two optional methods to your validator: blurEventHandler(){ } and inputEventHandler(){ } and the events will trigger those functions.

                              For further reference, you can check testValidator.es6 for a super-simple use case.


                              Zip-code Validation

                              To add a zip code validation, you need to add a data-validate="zip-code" attribute to the container. If you need to display the city and state or fill an input value, you can add the js-city-name and js-state-name class to the elements.


                                Test result:
                                City, State
                                <div class="ca-form__group js-form-group js-floating-label-input" data-validate="zip-code"> <label class="ca-form__label js-label">Zip code</label> <div class="ca-form__input-icon-wrapper ca-form__input-icon-wrapper--left"> <input class="ca-form__input" type="text" required placeholder="Zip code" pattern="\d{5}" title="Please type a 5 digit number" /><div class="ca-form__input-icon"> {% include "frontend/icons/location-icon.html" %} </div> </div> <ul class="ca-form__error js-errorlist"> </ul> <!--optional--> <span class="js-city-name"></span> <span class="js-state-name"></span> <input type="hidden" name="city" class="js-city-name" /> <input type="hidden" name="state" class="js-state-name" /> </div>

                                If you need to change the api host, you can use the data attribute data-api-host on the zip code component.

                                <div class="ca-form__group js-form-group js-floating-label-input" data-validate="zip-code" data-api-host="https://consumeraffairs.com"> <label class="ca-form__label js-label">Zip code</label> <div class="ca-form__input-icon-wrapper ca-form__input-icon-wrapper--left"> <input class="ca-form__input" type="text" required placeholder="Zip code" pattern="\d{5}" title="Please type a 5 digit number" /><div class="ca-form__input-icon"> {% include "frontend/icons/location-icon.html" %} </div> </div> <ul class="ca-form__error js-errorlist"> </ul> <!--optional--> <span class="js-city-name"></span> <span class="js-state-name"></span> <input type="hidden" name="city" class="js-city-name" /> <input type="hidden" name="state" class="js-state-name" /> </div>

                                Password input (with show/hide password functionality)

                                To make the show/hide button work, you should add the js-show-hide-password class to the ca-form__group element. The icon to show the password will appear only when the input is not empty.

                                  <div class="ca-form__group js-form-group js-floating-label-input"> <label class="ca-form__label js-label">Password</label> <div class="ca-form__input-icon-wrapper ca-form__input-icon--clickable js-show-hide-password"> <input class="ca-form__input" type="password" name="anyName" placeholder="Password" /> <a href="#" class="ca-form__input-icon ca-form__input-icon--clickable js-show-hide-password-btn ca-form__input-icon--hidden ca-form__input-icon--show-password" tabindex="-1"> {% include "base/common/icons/show-password.html" %} {% include "base/common/icons/hide-password.html" %} </a> </div> <ul class="ca-form__error js-errorlist"></ul> </div>

                                  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">Password</label> <div class="ca-form__input-icon-wrapper ca-form__input-icon--clickable"> <input class="ca-form__input" 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">Repeat password</label> <div class="ca-form__input-icon-wrapper ca-form__input-icon--clickable"> <input class="ca-form__input" 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>

                                              Range Slider

                                              Add the class ca-form__range and js-range-slider to the wrapper ca-form__group. One form group is required for each slider. Please use the snippets provided below.

                                              • The element that shows the current value can be any type of HTML tag - it could be a "div", "span", "p", etc, or an input of type number. Add the classes ca-form__range-val and js-range-val.
                                              • The current value element needs to be outside ca-form__range--slider.
                                              • Inside ca-form__range--slider we have the min value, slider, then max value. If you want to omit the minimum or maximum numbers, simply remove the elements.
                                              • Configure the min, max values, initial value, and step for each slider with the respective attributes on the slider input: min, max, value, step.
                                              <div class="ca-form__group ca-form__range js-form-group js-range-slider"> <p>Maximum reviews displayed: <span class="ca-form__range--val js-range-val"></span></p> <div class="ca-form__range--slider"> <span class="ca-form__range--min js-range-min"></span> <input type="range" min="0" max="5" value="4" step="1" /> <span class="ca-form__range--max js-range-max"></span> </div> </div>

                                              Slider with current value element value being a span. Class for custom styling: ca-form__range--val.


                                              Maximum reviews displayed:

                                              <div class="ca-form__group js-form-group ca-form__range js-range-slider"> <p>Maximum reviews displayed: <span class="ca-form__range--val js-range-val"></span></p> <div class="ca-form__range--slider"> <span class="ca-form__range--min js-range-min"></span> <input type="range" min="0" max="5" value="0" step="1" /> <span class="ca-form__range--max js-range-max"></span> </div> </div>

                                              Slider with current value element value being an editable input type number that will update changes to the slider component.


                                              Maximum reviews displayed:

                                              <div class="ca-form__group ca-form__range js-form-group js-range-slider"> <p>Maximum reviews displayed: <input type="number" class="ca-form__range--val js-range-val" /></p> <div class="ca-form__range--slider"> <span class="ca-form__range--min js-range-min"></span> <input type="range" min="2" max="10" value="0" step="1" /> <span class="ca-form__range--max js-range-max"></span> </div> </div>

                                              Slider with current value element value being a readonly input type number. Add the attribute readonly to the input


                                              Maximum reviews displayed:

                                              <div class="ca-form__group ca-form__range js-form-group js-range-slider"> <p>Maximum reviews displayed: <input type="number" class="ca-form__range--val js-range-val" readonly /></p> <div class="ca-form__range--slider"> <input type="range" min="0" max="8" value="0" step="1" /> </div> </div>

                                              To select an initial value, just add the attribute value to the slider input


                                              Maximum reviews displayed:

                                              <div class="ca-form__group ca-form__range js-form-group js-range-slider"> <p>Maximum reviews displayed: <input type="number" class="ca-form__range--val js-range-val" /></p> <div class="ca-form__range--slider"> <span class="ca-form__range--min js-range-min"></span> <input type="range" min="0" max="13" value="4" step="1" /> <span class="ca-form__range--max js-range-max"></span> </div> </div>

                                              Formating slider values


                                              To format the range slider value, use the attribute data-formatting in the input element with the desired formatting style.

                                              <input type="range" min="0" max="13" value="4" step="1" data-formatting="thousand" />

                                              Accepted formatting options:

                                              • thousand = 000,000,000
                                              <div class="ca-form__group ca-form__range js-form-group js-range-slider"> <p>Formatted value: <input type="number" class="ca-form__range--val js-range-val" /></p> <div class="ca-form__range--slider"> <span class="ca-form__range--min js-range-min"></span> <input type="range" min="0" max="13" value="4" step="1" data-formatting="thousand" /> <span class="ca-form__range--max js-range-max"></span> </div> </div>
                                              Example:

                                              Formatted value:


                                              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>

                                                            Checkbox with blue icon

                                                            The checkbox can have a blue icon color, to apply that just use the modifier ca-form__checkbox-icon--blue.

                                                            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-blue" value="agree" /> <div class="ca-form__checkbox-label"> <label for="agree-blue" class="ca-form__checkbox-icon ca-form__checkbox-icon--blue"> <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>

                                                              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>

                                                                              Shadowed

                                                                              To use the shadowed version, add the modifier ca-form__switch--shdw to ca-form__switch element.

                                                                                  <div class="ca-form__switches"> <div class="ca-form__group js-form-group"> <div class="ca-form__switch ca-form__switch--shdw"> <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" data-sg-module="initForm.basics"> <div class="ca-form__switch ca-form__switch--shdw"> <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>

                                                                                  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 green. 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>

                                                                                      Secondary radio button

                                                                                      Secondary radio buttons are blue. You need to add a ca-form__radio-label--secondary class to the label element.


                                                                                        • 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 ca-form__radio-label--secondary">Option 1</label> <ul class="ca-form__error js-errorlist"></ul> </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>

                                                                                              Shadowed 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-wrapper--shadowed"> <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>

                                                                                                Mobile fallback option with example error

                                                                                                • You should complete this field
                                                                                                <div class="ca-form__group js-form-group js-floating-label-input" 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>

                                                                                                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

                                                                                                  Autocomplete

                                                                                                  This is a autocomplete component build reusing js-choices, it provides suggestions based on a specific endpoint while the user types into the field.

                                                                                                  Implementation

                                                                                                  To implement it you need to add a ca-autocomplete and js-autocomplete class, the attribute multiple and the attribute data-source with the endpoint that will be used for suggestions.

                                                                                                  Also, you can define a model to be created based on it, just use data-model="..."

                                                                                                  Demo

                                                                                                  Example

                                                                                                  <div class="ca-form__group js-form-group" aria-autocomplete="list"> <div class="ca-form__input-icon-wrapper"> <select class="ca-form__select ca-autocomplete js-autocomplete" data-source="https://www.consumeraffairs.com/api/campaigns_startwith/?q="></select> <div class="ca-form__input-icon"> {% include "frontend/icons/search.html" } </div> </div> </div>

                                                                                                  Demo using company as data-model

                                                                                                  Example using company as data-model

                                                                                                  <div class="ca-form__group js-form-group" aria-autocomplete="list"> <div class="ca-form__input-icon-wrapper"> <select class="ca-form__select ca-autocomplete js-autocomplete" data-model="company" data-source="https://www.consumeraffairs.com/api/campaigns_startwith/?q="></select> <div class="ca-form__input-icon"> {% include "frontend/icons/search.html" } </div> </div> </div>

                                                                                                  Combined ZIP/Country

                                                                                                  This is a scalable and flexible Country/ZIP code validator, we reuse the floating label input and js-choices for it, it validates a zip code field based on a list of countries changing the label (if exists) and the placeholder to "ZIP Code" or "Postal Code" or any other code depending on the country selected, it also adds a RegExp validation pattern to validate the type of code based on the same criteria we mentioned before.

                                                                                                  Implementation

                                                                                                  To implement it you need to add a js-zip-country class to the wrapper element of the country list that contains the js-floating-label-input and js-choices classes, you also need to add a data-target-zip-code attribute with the selector of the linked ZIP Code wrapper that contains the input you will use to validate the zip code, if you want the label to change as well as the placeholder make sure the wrapper containing the class contains the element with the js-label class as a child.

                                                                                                  If you want to add the list search to the country list so that you can type your country just add the class js-choices-search-enabled.

                                                                                                  Demo

                                                                                                      Example

                                                                                                      <div class="ca-form__group js-form-group js-floating-label-input js-choices js-choices-search-enabled js-zip-country" aria-autocomplete="list" data-target-zip-code="#zip-code"> <label class="ca-form__label">Country</label> <div class="ca-form__select-wrapper"> <select class="ca-form__select"> <option></option> </select> </div> <ul class="ca-form__error js-errorlist"></ul> </div> <div class="ca-form__group js-form-group js-floating-label-input" id="zip-code"> <label class="ca-form__label js-label">ZIP Code</label> <div class="ca-form__input-icon-wrapper ca-form__input-icon-wrapper--left"> <input class="ca-form__input" type="text" required placeholder="ZIP Code" /> <div class="ca-form__input-icon"> {% include "frontend/icons/location-icon.html" %} </div> </div> <ul class="ca-form__error js-errorlist"></ul> </div>

                                                                                                      Dynamic loading form elements

                                                                                                      For loading dynamic form elements, and/or initialize them, you need to dispatch an event to the window object, after the elements are loaded into the DOM:

                                                                                                      • com.consumeraffairs.styleguide.initForm
                                                                                                        Initializes all elements on the form - the lazy way;
                                                                                                      • com.consumeraffairs.styleguide.initForm.autocomplete
                                                                                                        Initializes all Autocompletes on the form;

                                                                                                      Use the buttons bellow to load new form elements, and initialize them dispatching the events using the green button bellow.