Go to rebrand

Vehicle component

This is a form component specifically make to handle vehicles Year/Makes/Models.

How does it work?

Year/Makes/Models are co-dependent, this means that the models depend on a make and the makes on years, meaning that if one of the parent elements is changed the childs that depend on it will be cleaned up and the default placeholder will be shown.

Important: if a year older than 1992 is set as the start date (use case: Auto Transport lead forms), there will be a "1991 or older" option in the Year dropdown and the Make/Model fields will contain only the "Other" option since that's enough data to the companies and it will simplify the UI.

Implementing it

You will need to add to your page the following elements:

Notice that ca_styleguide_forms.js should be loaded first, once ca_styleguide_vehicle.js depends on it.

<script src="static("js/ca_styleguide_forms.js")"></script> <script src="static("js/ca_styleguide_vehicle.js")"></script>

and the CSS

<link rel="stylesheet" type="text/css" media="all" href="static('css/ca_styleguide_forms.css')" />

Note: Make sure that the vehicle script is loaded before the forms to avoid conflicts with choicesjs

To add the component to your project you should use the code below, make sure that the data-vehicle-url property is present and contains the base URL from which the data of the component will be fetched.

<div class="ca-form js-vehicle" data-vehicle-url="https://staging-my.consumeraffairs.com/api"> <div class="ca-form__group js-form-group js-floating-label-input js-choices"> <label class="ca-form__label">Year</label> <div class="ca-form__select-wrapper"> <select class="ca-form__select js-vehicle-year"> <option disabled selected placeholder>Select a Year</option> </select> </div> <ul class="ca-form__error js-errorlist"></ul> </div> <div class="ca-form__group js-form-group js-floating-label-input js-choices js-disabled"> <label class="ca-form__label">Make</label> <div class="ca-form__select-wrapper"> <select data-vehicle-placeholder="Please select a make" class="ca-form__select js-vehicle-make" > <option disabled selected placeholder>Select a Make</option> </select> </div> <ul class="ca-form__error js-errorlist"></ul> </div> <div class="ca-form__group js-form-group js-floating-label-input js-choices js-disabled"> <label class="ca-form__label">Model</label> <div class="ca-form__select-wrapper"> <select data-vehicle-placeholder="Please select a model" class="ca-form__select js-vehicle-model" > <option disabled selected placeholder>Select a Model</option> </select> </div> <ul class="ca-form__error js-errorlist"></ul> </div> </div>


  • data-vehicle-url: Sets the base url for the endpoint calls.
  • data-vehicle-start-year (Optional, default 1992): Sets the lowest year to which the select list will go to. If it's set to a year before 1992, it will be represented by the "1991 or older" option (read more on the "How does it work?" section).
  • data-vehicle-final-year (Optional, default current year): Sets the final year yo which the select list will go to.
  • data-vehicle-make-top: Sets the top param to return the most popular make list for a given year.
  • data-vehicle-placeholder (Optional, default "Select a Make/Model"): Sets the placeholder for each select
  • data-vehicle-year (Optional): Sets a pre selected value for year dropdown
  • data-vehicle-make (Optional): Sets a pre selected value for make dropdown
  • data-vehicle-model (Optional): Sets a pre selected value for model

Dynamic initialization

To start the component dynamically you only have to dispatch a custom event to the window called com.consumeraffairs.styleguide.vehicle.init, that will initialize everything that is needed for the component to work.

Example (Demo)