Components

Forms

Forms are used for capturing user-entered data to be used by the application; searching, sorting and filtering data, and saving settings. Forms may consist of many components, such as Text Fields, Comment Fields, Radio Buttons, Checkboxes, and more. Forms should be designed to be as user-friendly as possible so data can be entered and captured without inconveniencing the user. All Form components should be labeled to clearly indicate what information is being asked of the user; they should be self-explanatory and guide users through the data entry process.

Text Fields

Text Fields should be used when capturing freeform text to be entered by the user. Text Fields should all be clearly labeled to describe exactly what information is being asked from the user. If the user must enter data in a specific format (i.e. dates or times), helper text beneath the text field is required. Placeholder text should only be used as auxiliary content to provide an example of a valid entry.


                        <div class="form-group">

                         <label for="NormalState">Normal State</label>

                         <input type="text" class="form-control" id="NormalState">

                        </div>


                        


                        <div class="form-group">

                         <label for="AlertState">Alert State</label>

                         <small id="required" class="invalid-feedback">Required</small>

                        </div>


                        


                        <div class="form-group">

                         <label for="DisabledState">Disabled State</label>

                         <input type="text" id="DisabledState" disabled="disabled" class="form-control" value="Lorem ipsum">

                        </div>

Select

Dropdowns are used to present multiple options that would otherwise be unmanageable to display on the page. Dropdowns can be used for making a selection that results in the sorting and filtering of data or for entering a choice when submitting data in a form. Dropdown labels should implicitly describe the type of options that users should expect to see in the list and be limited to one line of text. If there are more than 15 options from which the user may select, a Dropdown should not be used and the UX Team should be consulted for an alternate solution.


                        <div class="form-group">

                         <label for="NormalStateSelect">Normal State</label>

                         <select class="form-control" id="NormalStateSelect">

                          <option>Alan Grant</option>

                         </select>

                        </div>

Text Areas

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.


                        <div class="form-group">

                         <label for="exampleFormControlTextTitle">Example title</label>

                         <textarea class="form-control" id="exampleFormControlTextTitle" rows="3"</textarea>

                        </div>

Checkboxes

Checkboxes are best used when the user may make multiple selections from a list of options that are not mutually exclusive. If a user is required to select only one option from a list, a Radio Button should be used instead. Checkbox labels should be clear and limited to a single line if possible. When using Checkboxes, the result of the user’s selection should be clearly explained before moving forward.

Example Label


                        <div class="form-check">

                             <input class="form-check-input" type="checkbox" value="" id="exampleCheck1">

                              <label class="form-check-label" for="exampleCheck1">

                               Example Label

                              </label>

                          </div>

Radio Buttons

Radio Buttons should be used when the user is required to choose a single option from two or more unique options. Labels for Radio Buttons should be clear and concise, leaving no room for interpretation as to what option the user is selecting. Radio Buttons are best used in small sets where it would benefit the user to see all options at once.

Example Label


                        <div class="form-check">

                         <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>

                          <label class="form-check-label" for="exampleRadios1">

                           Example Label

                          </label>

                        </div>

Switches

Switches allow the user to toggle a single setting or option on or off. In the case where a user must select yes or no for an option, Checkboxes should be used instead. Switches should always be labeled, with the label implicitly stating what is being toggled on or off.
To use a Switch, add the below JavaScript file to ensure functionality.

Selected State Unselected State


                        <label for="switch" class="switch-label">Selected State</label>

                        <button role="switch" aria-checked="true" id="switch" class="switch" aria-label="Selected State">