Form Elements

Select Input Checkboxes & Radios

Dijit Select

Examples

  <select name="" id="">

    <option value="">
    Select an Option 
    </option>

    <option value="">Monday 
    </option>

    <option value="">Tuesday
     </option>

  </select>
Note

Expands on default Dijit select to add images and/or a second line containing meta information.

Multi Select

Examples

  <select name="" id="">

    <option value="">
    Select an Option 
    </option>

    <option value="">Monday 
    </option>

    <option value="">Tuesday
     </option>

  </select>
Note

Consider using other select forms before introducing multi select as these should be used sparingly. It is not the most effective way to display large amounts of data.

If you must create a multi select, define a regular select with options. Then, define the data-dojo-type of the element to data-dojo-type="dojox/form/CheckedMultiSelect"

Make sure you add the following attributes: dropDown="true" multiple="true" labelText="Select options"

Days of week select

Examples

  <select name="" id="">

    <option value="">
    Select an Option 
    </option>

    <option value="">Monday 
    </option>

    <option value="">Tuesday
     </option>

  </select>
Note

To create a days of week select, define it like a regular select. Add the attribute data-dojo-type with the following value: mojo/widgets/input/DaysWeek

If you want all checkboxes selected by default add the attribute data-dojo-props="selectAll:'true'"

Text Input

Examples

Personal information
<div class="input_parent" >

  <input type="text"
    placeholder="Email">

  <label for="Last Name">
  Email
  </label>


</div>
Note

Text inputs are accompanied by a label and wrapped inside a fieldset. The :hover and :focus styles follow our brand colors.

Required fields can be indicated by adding the required class to the associated label.

Validation feedback

Examples

Personal information
šŸ™ˆ
šŸ™‰
Error 
<div class="password_parent" >

  <input type="password"
    placeholder="Password"
    oninput="showPasswordError(this)">

  <label for="password">
  Password
  </label>

  <div id="show" class="tribute"
   onclick="triggerEmoji()">šŸ™ˆ</div >

  <div id="hide" class="tribute"
   onclick="triggerEmoji()">šŸ™‰</div >

   <span>Error</span>

</div>
Note

Text inputs are accompanied by a label and wrapped inside a fieldset. The :hover and :focus styles follow our brand colors.

Required fields can be indicated by adding the required class to the associated label.

Filtered Search

Examples

search-icon 
<div class="password_parent" >

  <input type="search"
    placeholder="What course did you want to start taking ?"
    />

  <img 
  src="https://www.svgrepo.com/show/14071/search.svg">
  alt="search-icon"
  >



</div>
Note

Input fields that have not passed validation are updated with an invalid class.

Like field-help, the invalid-error message is placed right after the input field.

Field validation is handled by the backend, and the styles and attributes required to style the errors are provided by the controller.

Dijit radio & checkboxes

Examples

Radio

Checkbox

  <select name="" id="">

    <option value="">
    Select an Option 
    </option>

    <option value="">Monday 
    </option>

    <option value="">Tuesday
     </option>

  </select>
Note

To create a days of week select, define it like a regular select. Add the attribute data-dojo-type with the following value: mojo/widgets/input/DaysWeek

If you want all checkboxes selected by default add the attribute data-dojo-props="selectAll:'true'"

Radio & checkboxes description

Examples
  <select name="" id="">

    <option value="">
    Select an Option 
    </option>

    <option value="">Monday 
    </option>

    <option value="">Tuesday
     </option>

  </select>
Note

To create a days of week select, define it like a regular select. Add the attribute data-dojo-type with the following value: mojo/widgets/input/DaysWeek

If you want all checkboxes selected by default add the attribute data-dojo-props="selectAll:'true'"

Switch

Examples
  <select name="" id="">

    <option value="">
    Select an Option 
    </option>

    <option value="">Monday 
    </option>

    <option value="">Tuesday
     </option>

  </select>
Note

To create a days of week select, define it like a regular select. Add the attribute data-dojo-type with the following value: mojo/widgets/input/DaysWeek

If you want all checkboxes selected by default add the attribute data-dojo-props="selectAll:'true'"