Form Elements

Creating a form is designed to be easy and flexible. Forms are built with standard form elements and some standard classes to make sure their proper rendering across different browsers.

How to import form styles:

In order to use forms in your project, import following path in your main styles:

@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/forms
How to customize form styles:

In order to customize forms in your theme as per requirements, import following path in your theme-settings file:

@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/forms

Input Field

Use relevant attribute on all inputs (input type = "email" for email address or input type="search" for Search fields).

Basic Input

Use class="form-control" on Input for pre-defined styles.

<div class="formGroup">
  <label for="formDefault" class="sr--only">Default</label>
  <div class="formControlWrap flex--wrap d--flex align--items--center">
    <div class="formControlHolder d--flex align--items--center">
      <input
        type="email"
        class="formControl"
        id="formDefault"
        placeholder="Default Input"
        />
    </div>
  </div>
</div>
Input with Variations
Disabled and Readonly Input

Use additional classes on Input holder ( disabled, readonly ) and add readonly or aria-disabled="true" on input 

<div class="formGroup col-3">
  <label for="emailReadonly" class="sr--only">Email Readonly</label>
    <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder d--flex align--items--center readonly">
      <input
        type="email"
        class="formControl"
        placeholder="Readonly Input"
        id="emailReadonly"
        readonly="readonly"
      />
    </div>
  </div>
</div>

<div class="formGroup col-3">
  <label for="emailDisabled" class="sr--only">Email Disabled</label>
    <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder d--flex align--items--center disabled">
      <input
        type="email"
        class="formControl"
        placeholder="Disabled Input"
        id="emailDisabled"
        aria-disabled="true"
        readonly="readonly"
      />
    </div>
  </div>
</div>
Input with Variations

Use additional classes on Input holder ( Curved, Rounded, Textonly ) for variations. 

<div class="formGroup">
  <label for="emailCurved" class="sr--only">Email Curved</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder d--flex align--items--center curved">
      <input
        type="email"
        class="formControl"
        placeholder="Curved Input"
        id="emailCurved"
         />
    </div>
  </div>
</div>
<div class="formGroup">
  <label for="emailRounded" class="sr--only">Email Rounded</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder d--flex align--items--center rounded">
      <input
        type="email"
        class="formControl"
        placeholder="Rounded Input"
        id="emailRounded"
         />
    </div>
  </div>
</div>
<div class="formGroup col-3">
  <label for="emailtextONly" class="sr--only">Email Rounded</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder d--flex align--items--center textOnly">
      <input
        type="email"
        class="formControl formControl--textOnly"
        placeholder="Text Input"
        id="emailtextONly"
        />
    </div>
  </div>
</div>
Input form Fields With labels

Label is paired with Input ( using ID ) so that click on Label shifts focus inside Input. 

<div class="formGroup">
  <label for="formDefault1" class="info">Default</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder d--flex align--items--center">
      <input
        type="email"
        class="formControl"
        id="formDefault1"
        placeholder="Default Input"
      />
    </div>
  </div>
</div>
<div class="formGroup">
  <label for="emailCurved1" class="required">Email Curved</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder d--flex align--items--center curved">
      <input
        type="email"
        class="formControl"
        placeholder="Curved Input"
        id="emailCurved1"
        />
    </div>
  </div>
</div>
<div class="formGroup col-3">
  <label for="emailRounded1" class="">Email Rounded</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder d--flex align--items--center rounded">
      <input
        type="email"
        class="formControl"
        placeholder="Rounded Input"
        id="emailRounded1"
        />
    </div>
  </div>
</div>

<div class="formGroup col-3">
  <label for="emailtextONl1" class="">Email TextOnly</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder d--flex align--items--center textOnly">
      <input
        type="email"
        class="formControl formControl--textOnly"
        placeholder="Text Input"
        id="emailtextONl1"
        />
    </div>
  </div>
</div>
Input Fields With Search Icon

Add additional icon for description.

<div class="formGroup ">
  <label for="FirstName">Label</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="icnRight formControlHolder d--flex align--items--center">
    <span class="icon-cross p--2"></span>
      <input
        type="text"
        class="formControl"
        id="FirstName"
        name="FirstName"
        required
      />
      <button
        type="button"
        class="p--2 icon-search searchInputBtn"
        aria-label="Label"
      ></button>
    </div>
    <span class="pl--2 hide icon-info errorOption"></span>
    <span class="pl--2 hide icon-check successOption"></span>
  </div>
</div>

<div class="formGroup ">
  <label for="FirstName4">Label</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="icnRight formControlHolder d--flex curved align--items--center">
      <input
        type="text"
        class="formControl"
        id="FirstName4"
        name="FirstName"
        placeholder="Text"
        required
      />
      <button
        type="button"
        class="p--2 icon-search searchInputBtn"
        aria-label="Label"
      ></button>
    </div>
    <span class="pl--2 hide icon-info errorOption"></span>
    <span class="pl--2 hide icon-check successOption"></span>
  </div>
</div>

<div class="formGroup">
  <label for="FirstName24">Label</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="icnRight formControlHolder d--flex rounded align--items--center">
      <input
        type="text"
        class="formControl"
        id="FirstName24"
        name="FirstName"
        placeholder="Text"
        required
      />
      <button
        type="button"
        class="p--2 icon-search searchInputBtn"
        aria-label="Label"
      ></button>
    </div>
    <span class="pl--2 hide icon-info errorOption"></span>
    <span class="pl--2 hide icon-check successOption"></span>
  </div>
</div>

<div class="formGroup">
  <label for="FirstName24s4">Label</label>
  <div class="formControlWrap d--flex align--items--center flex--wrap">
    <div class="icnRight formControlHolder textOnly d--flex align--items--center">
      <input
        type="text"
        class="formControl"
        id="FirstName24s4"
        name="FirstName"
        placeholder="Text"
        required
      />
      <button
        type="button"
        class="p--2 icon-search searchInputBtn"
        aria-label="Label"
      ></button>
    </div>
    <span class="pl--2 hide icon-info errorOption"></span>
    <span class="pl--2 hide icon-check successOption"></span>
  </div>
</div>
With Error and Success icons

Inputs can have success and error feedback. Success is shown with green icon while error state is shown by red icon and the red border.

Error Message
Error Message
Error Message
Error Message 
<div class="formGroup">
  <label for="FirstName2">Label</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="icnLeft formControlHolder d--flex align--items--center">
      <button
        type="button"
        class="p--2 icon-search searchInputBtn"
        aria-label="Label"
      ></button>
      <input
        type="search"
        class="formControl"
        id="FirstName2"
        name="FirstName"
        placeholder="Text"
        required
      />
    </div>
    <span class="pl--2 hide icon-info errorOption"></span>
    <span class="pl--2 show icon-check successOption"></span>
    <span class="hide pt-mi-1ext-danger">Error Message</span>
  </div>
</div>

<div class="formGroup">
  <label for="FirstName22">Error</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="icnRight d--flex align--items--center formControlHolder curved error">
      <input
        type="search"
        class="formControl"
        id="FirstName22"
        name="FirstName"
        placeholder="Text"
        required
      />
      <button
        type="button"
        class="p--2 icon-search searchInputBtn"
        aria-label="Label"
      ></button>
    </div>
    <span class="pl--2 show icon-info errorOption"></span>
    <span class="pl--2 hide icon-check successOption"></span>
    <span class="pt-mi-1ext-danger">Error Message</span>
  </div>
</div>

<div class="formGroup">
  <label for="FirstNam44">Success</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="icnRight d--flex align--items--center formControlHolder rounded">
      <input
        type="search"
        class="formControl"
        id="FirstNam44"
        name="FirstName"
        placeholder="Text"
        required
      />
      <button
        type="button"
        class="p--2 icon-search searchInputBtn"
        aria-label="Label"
      ></button>
    </div>
    <span class="pl--2 hide icon-info errorOption"></span>
    <span class="pl--2 show icon-check successOption"></span>
    <span class="pt-mi-1ext-danger hide">Error Message</span>
  </div>
</div>

<div class="formGroup">
  <label for="FirstNam444">Label</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="icnRight formControlHolder d--flex align--items--center textOnly">
      <input
        type="text"
        class="formControl success pl--2"
        id="FirstNam444"
        name="FirstName"
        placeholder="Text"
        required
      />
      <button
        type="button"
        class="p--2 icon-search searchInputBtn"
        aria-label="Label"
      ></button>
    </div>
    <span class="pl--2 hide icon-info errorOption"></span>
    <span class="pl--2 show icon-check successOption"></span>
    <span class="pt-mi-1ext-danger hide">Error Message</span>
  </div>
</div>
Input Search Fields With Search Icon

use input type="search" for search fields.

Error Message
Error Message
Error Message
Error Message 
<div class="formGroup">
  <label for="FirstName1">Label</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="icnRight formControlHolder d--flex align--items--center">
      <input
        type="search"
        class="formControl searchClear"
        id="FirstName1"
        name="FirstName"
        placeholder="Text"
        required
      />
      <button
        type="button"
        class="p--2 icon-search searchInputBtn"
        aria-label="Label"
      ></button>
    </div>
    <span class="pl--2 hide icon-info errorOption"></span>
    <span class="pl--2 show icon-check successOption"></span>
    <span class="text--danger hide">Error Message</span>
  </div>
</div>

<div class="formGroup">
  <label for="FirstName42">Label</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="icnRight formControlHolder curved d--flex align--items--center">
      <input
        type="search"
        class="formControl searchClear"
        id="FirstName42"
        name="FirstName"
        placeholder="Text"
        required
      />
      <button
        type="button"
        class="p--2 icon-search searchInputBtn"
        aria-label="Label"
      ></button>
    </div>
    <span class="pl--2 hide icon-info errorOption"></span>
    <span class="pl--2 show icon-check successOption"></span>
    <span class="hide text--danger">Error Message</span>
  </div>
</div>

<div class="formGroup">
  <label for="FirstName242">Label</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="icnRight formControlHolder d--flex align--items--center rounded error">
      <input
        type="search"
        class="formControl searchClear"
        id="FirstName242"
        name="FirstName"
        placeholder="Text"
        required
      />
      <button
        type="button"
        class="p--2 icon-search searchInputBtn"
        aria-label="Label"
      ></button>
    </div>
    <span class="pl--2 show icon-info errorOption"></span>
    <span class="pl--2 hide icon-check successOption"></span>
    <span class="text--danger">Error Message</span>
  </div>
</div>

<div class="formGroup">
  <label for="FirstName2424">Label</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="icnRight formControlHolder d--flex align--items--center textOnly error">
      <input
        type="search"
        class="formControl searchClear"
        id="FirstName2424"
        name="FirstName"
        placeholder="Text"
        required
      />
      <button
        type="button"
        class="p--2 icon-search searchInputBtn"
        aria-label="Label"
      ></button>
    </div>
    <span class="pl--2 show icon-info errorOption"></span>
    <span class="pl--2 hide icon-check successOption"></span>
    <span class="text--danger">Error Message</span>
  </div>
</div>
Input form Fields With backgrounds

Add additional class on Input Holder for background variation

<div class="formGroup">
  <label for="formDefault2">Default</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder hasBg d--flex align--items--center">
      <input
        type="email"
        class="formControl"
        id="formDefault2"
        placeholder="Default Input"
        />
    </div>
  </div>
</div>

<div class="formGroup">
   <label for="emailCurved2" class="sr--only">Email Curved</label>
   <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder d--flex align--items--center curved hasBg">
     <input
      type="email"
      class="formControl"
      placeholder="Curved Input"
      id="emailCurved2"
       />
   </div>
  </div>
</div>
<div class="formGroup">
  <label for="emailRounded2" class="sr--only">Email Rounded</label>
   <div class="formControlWrap d--flex flex--wrap align--items--center">
      <div class="formControlHolder d--flex align--items--center rounded hasBg">
        <input
           type="email"
           class="formControl"
           placeholder="Rounded Input"
           id="emailRounded2"
           />
       </div>
   </div>
</div>
<div class="formGroup">
  <label for="emailtextONl2" class="sr--only">Email Rounded</label>
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder d--flex align--items--center textOnly hasBg">
      <input
        type="email"
        class="formControl"
        placeholder="Text Input"
        id="emailtextONl2"
        />
    </div>
  </div>
</div>
File Upload Input
FileName .pdf
Error
FileName .pdf
Uploading in Progress
FileName .pdf
uploaded 
<div class="fds-fileUploade-holder position-relative">
  <label for="uploaderd" class="fds-fileUploade-label mb--0 w--100 d--flex flex--column justify--content--center align--items--center font--weight--normal">
    <figure>
      <span class="fds-uploadIcon icon-download"></span>
    </figure>
    <p class="mb--0">
    Drag and Drop your or <span class="text__primary font--weight--bold px--2">Browse</span> your files
    </p>
  </label>
  <input class="position-absolute invisible top-0" id="uploaderd" type="file" multiple/>
</div>
Range Slider
$0 $2,000,000
52 
<div class="mb--5">
  <div class="d--flex justify--content--between pb--2">
    <span>$0</span>
    <span>$2,000,000</span>
  </div>
  <div class="slider-wrapper">
    <div class="slider-track-wrapper">
      <div class="slider-track-background"></div>
      <div class="slider-track-fill" style="transform: translateX(0px) scale3d(0.52, 1, 1);"></div>
    </div>
    <div class="slider-ticks-container">
      <div class="slider-ticks" style="background-size: 0% 2px; transform: translateZ(0px) translateX(0%);"></div>
    </div>
    <div class="slider-thumb-container" style="transform: translateX(-48%);">
      <div class="slider-focus-ring"></div>
      <div class="slider-thumb" role="slider" tabindex="0"></div>
      <div class="slider-thumb-label">
        <span class="slider-thumb-label-text">52</span>
      </div>
    </div>
  </div>
</div>

Text Area

(Icons Inside)

Similar to Input, the purpose of TextArea is to take multi line user Input.

Error Message 
<div class="formGroup">
  <div class="formControlWrap d--flex flex--wrap align--items--center">
   <div class="formControlHolder d--flex align--items--center">
    <textarea
     class="formControl pt--2 pl--3 pb--1 pr--1"
     placeholder="Text"
     ="textarea"
    ></textarea>
   </div>
  </div>
</div>

<div class="formGroup">
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder d--flex align--items--center curved">
      <textarea
        class="formControl pt--2 pl--3 pb--1 pr--1"
        placeholder="Text"
        ="textarea"
        >
     </textarea>
   </div>
 </div>
</div>

<div class="formGroup">
  <div class="formControlWrap d--flex flex--wrap align--items--center">
    <div class="formControlHolder d--flex align--items--center">
      <textarea
       class="formControl pt--2 pl--3 pb--1 pr--1"
       placeholder="Text area with characters count"
       ="textarea"
       id="textarea"
      >
     </textarea>
    </div>
    <span id="textChar"></span>
  </div>
</div>

<div class="formGroup">
  <div class="formControlWrap d--flex flex--wrap intIcn">
    <div class="formControlHolder d--flex align--items--center">
      <textarea
       class="formControl success pt--2 pl--3 pb--1 pr--5"
       placeholder="Text"
       ="textarea"
       id="textarea1"
      >
      </textarea>
   </div>
   <span class="icon-check successOption"></span>
  </div>
</div>

<div class="formGroup">
  <div class="formControlWrap d--flex flex--wrap intIcn">
    <div class="formControlHolder d--flex align--items--center curved">
      <textarea
       class="formControl success pt--2 pl--3 pb--1 pr--5"
       placeholder="Text"
       ="textarea"
       id="textarea1"
      >
     </textarea>
   </div>
   <span class="icon-check successOption"></span>
  </div>
</div>

<div class="formGroup">
  <div class="formControlWrap d--flex flex--wrap intIcn">
    <div class="formControlHolder error d--flex align--items--center">
      <textarea
       class="formControl pt--2 pl--3 pb--1 pr--5"
       placeholder="Text"
       ="textarea"
       id="textarea1"
      >
     </textarea>
   </div>
   <span class="icon-info errorOption"></span>
   <span class="text--danger">Error Message</span>
  </div>
</div>
(Icons Outside)

Just another TextArea variation with Icons outside TextArea.

Error Message 
<div class="formGroup">
 <div class="formControlWrap d--flex flex--wrap">
  <div class="formControlHolder d--flex">
   <textarea
     class="formControl success pt--2 pl--3 pb--1 pr--1"
     placeholder="Text"
     ="textarea"
   ></textarea>
  </div>
  <span class="pl--2 icon-check successOption"></span>
 </div>
</div>

<div class="formGroup">
 <div class="formControlWrap d--flex flex--wrap">
  <div class="formControlHolder d--flex curved">
   <textarea
     class="formControl success pt--2 pl--3 pb--1 pr--1"
     placeholder="Text"
     ="textarea"
   ></textarea>
  </div>
  <span class="pl--2 icon-check successOption"></span>
 </div>
</div>

<div class="formGroup">
 <div class="formControlWrap d--flex flex--wrap">
  <div class="formControlHolder error d--flex">
   <textarea
     class="formControl pt--2 pl--3 pb--1 pr--1"
     placeholder="Text"
     ="textarea"
   ></textarea>
  </div>
  <span class="pl--2 icon-info errorOption"></span>
  <span class="text--danger">Error Message</span>
 </div>
</div>

SELECT

In FDS design system, we have developed custom SELECT element with custom styles. Browser default layouts are not shown in these custom layouts.

Use formControlHolder__select class in parent holder for SELECT styles.

Please Select any option
Please Select any option
Please Select any option 
<!-- 1 -->
<div class="formControlWrap d--flex flex--wrap align--items--center">
  <div class="formControlHolder formControlHolder__select">
    <select
      class="formControl"
      name="course"
      id="myselect"
      required
    >
      <option value="">Pick an option</option>
      <option>Pottery</option>
      <option>Gardening</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Entrepreneurship</option>
    </select>
    <button
      type="button"
      class="icon-clear clearCrossBtn"
      aria-label="Label"
    ></button>
  </div>
  <span class="hide pl--2 icon-info errorOption"></span>
  <span class="hide text--danger">Please Select any option</span>
</div>

<!-- 2 -->
<div class="formControlWrap d--flex align--items--center flex--wrap">
  <div class="formControlHolder formControlHolder__select">
    <select
      class="formControl searchClear"
      name="course"
      id="myselect1"
      required
    >
      <option value>Pick an option</option>
      <option>Pottery</option>
      <option>Gardening</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Entrepreneurship</option>
    </select>
    <button
      type="button"
      class="icon-clear clearCrossBtn"
      aria-label="Label"
    ></button>
  </div>
  <span class="hide pl--2 icon-info errorOption"></span>
  <span class="text--danger hide">Please Select any option</span>
</div>

<!-- 3 -->
<div class="formControlWrap d--flex align--items--center flex--wrap">
  <div class="formControlHolder formControlHolder__select error">
    <select
      class="formControl searchClear"
      name="course"
      id="myselect14"
      required
    >
      <option value="">Pick an option</option>
      <option>Pottery</option>
      <option>Gardening</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Entrepreneurship</option>
    </select>
    <button
      type="button"
      class="icon-clear clearCrossBtn"
      aria-label="Label"
    ></button>
  </div>
  <span class="pl--2 icon-info errorOption"></span>
  <span class="text--danger">Please Select any option</span>
</div>
Please Select any option
Please Select any option 
<!-- 1 -->
<div class="formControlWrap d--flex align--items--center flex--wrap">
  <div class="formControlHolder formControlHolder__select">
    <select
      class="formControl formControl__event"
      name="course"
      id="myselect124"
      required
    >
      <option value="">Pick an option</option>
      <option>Pottery</option>
      <option>Gardening</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Entrepreneurship</option>
    </select>
    <button
      type="button"
      class="icon-clear clearCrossBtn"
      aria-label="Label"
    ></button>
    <button
      type="button"
      class="icon-today eventBtn"
      aria-label="Label"
    ></button>
  </div>
  <span class="hide pl--2 icon-info errorOption"></span>
  <span class="text--danger hide">Please Select any option</span>
</div>
<!-- 2 -->
<div class="formControlWrap d--flex align--items--center flex--wrap">
  <div class="formControlHolder formControlHolder__select error">
    <select
      class="formControl formControl__event"
      name="course"
      id="myselect125"
      required
    >
      <option value="">Pick an option</option>
      <option>Pottery</option>
      <option>Gardening</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Entrepreneurship</option>
    </select>
    <button
      type="button"
      class="icon-clear clearCrossBtn"
      aria-label="Label"
    ></button>
    <button
      type="button"
      class="icon-today eventBtn"
      aria-label="Label"
    ></button>
  </div>
  <span class="pl--2 icon-info errorOption"></span>
  <span class="text--danger">Please Select any option</span>
</div>
SELECT with Variations
Please Select any option
Please Select any option
Please Select any option
Please Select any option 
<!-- 1 -->
<div class="formControlWrap d--flex align--items--center flex--wrap">
  <div class="formControlHolder formControlHolder__select rounded">
    <select
      class="formControl formControl__event"
      name="course"
      id="myselect126"
      required
    >
      <option value="">Pick an option</option>
      <option>Pottery</option>
      <option>Gardening</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Entrepreneurship</option>
    </select>
    <button
      type="button"
      class="icon-clear clearCrossBtn"
      aria-label="Label"
    ></button>
    <button
      type="button"
      class="icon-today eventBtn"
      aria-label="Label"
    ></button>
  </div>
  <span class="hide pl--2 icon-info errorOption"></span>
  <span class="text--danger hide">Please Select any option</span>
</div>

<!-- 2 -->
<div class="formControlWrap d--flex align--items--center flex--wrap">
  <div class="formControlHolder formControlHolder__select textOnly">
    <select
      class="formControl formControl__event"
      name="course"
      id="myselect127"
      required
    >
      <option value="">Pick an option</option>
      <option>Pottery</option>
      <option>Gardening</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Entrepreneurship</option>
    </select>
    <button
      type="button"
      class="icon-clear clearCrossBtn"
      aria-label="Label"
    ></button>
    <button
      type="button"
      class="icon-today eventBtn"
      aria-label="Label"
    ></button>
  </div>
  <span class="hide pl--2 icon-info errorOption"></span>
  <span class="text--danger hide">Please Select any option</span>
</div>

<!-- 3 -->
<div class="formControlWrap d--flex align--items--center flex--wrap">
  <div class="formControlHolder formControlHolder__select hasBg">
    <select
      class="formControl formControl__event"
      name="course"
      id="myselect128"
      required
    >
      <option value="">Pick an option</option>
      <option>Pottery</option>
      <option>Gardening</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Entrepreneurship</option>
    </select>
    <button
      type="button"
      class="icon-clear clearCrossBtn"
      aria-label="Label"
    ></button>
    <button
      type="button"
      class="icon-today eventBtn"
      aria-label="Label"
    ></button>
  </div>
  <span class="hide pl--2 icon-info errorOption"></span>
  <span class="text--danger hide">Please Select any option</span>
</div>

<!-- 4 -->
<div class="formControlWrap d--flex align--items--center flex--wrap">
  <div class="formControlHolder formControlHolder__select hasBg">
    <select
      class="formControl"
      name="course"
      id="myselect129"
      required
    >
      <option value="">Pick an option</option>
      <option>Pottery</option>
      <option>Gardening</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Entrepreneurship</option>
    </select>
    <button
      type="button"
      class="icon-clear clearCrossBtn"
      aria-label="Label"
    ></button>
    <button
      type="button"
      class="icon-today eventBtn"
      aria-label="Label"
    ></button>
  </div>
  <span class="hide pl--2 icon-info errorOption"></span>
  <span class="fSELECT
                hide text--danger">Please Select any option</span>
</div>

CheckBox

Checkboxes are used to provide multiple choices to user from a list. This is opposite to the case of radio buttons where the user must select just one choice. Each individual Checkbox also have its own label, created using a typical <label>

Default Checkbox
Curved
Rounded
Error States:
<!-- Default -->
<div class="formCheck">
  <div class="checkBox">
    <input type="checkbox" id="checkbox1" checked />
    <span class="checkboxFake"></span>
  </div>
  <label class="checkLabel sr--only" for="checkbox1">label</label>
</div>
<!-- Curved -->
<div class="formCheck">
  <div class="checkBox checkBox--curved">
    <input type="checkbox" id="checkbox1" checked />
    <span class="checkboxFake"></span>
  </div>
  <label class="checkLabel sr--only" for="checkbox1">label</label>
</div>
<!-- Rounded -->
<div class="formCheck">
  <div class="checkBox checkBox--rounded">
    <input type="checkbox" id="checkbox1" checked />
    <span class="checkboxFake"></span>
  </div>
  <label class="checkLabel sr--only" for="checkbox1">label</label>
</div>
Checkboxes with Background

add checkBox__bg class for additional background:

Default Checkbox
Curved
Rounded
Error States:
<!-- Default -->
<div class="formCheck">
  <div class="checkbox__bg checkBox">
    <input type="checkbox" id="checkbox1" checked />
    <span class="checkboxFake"></span>
  </div>
  <label class="checkLabel sr--only" for="checkbox1">label</label>
</div>
<!-- Curved -->
<div class="formCheck">
  <div class="checkbox__bg checkBox checkBox--curved">
    <input type="checkbox" id="checkbox1" checked />
    <span class="checkboxFake"></span>
  </div>
  <label class="checkLabel sr--only" for="checkbox1">label</label>
</div>
<!-- Rounded -->
<div class="formCheck">
  <div class="checkbox__bg checkBox checkBox--rounded">
    <input type="checkbox" id="checkbox1" checked />
    <span class="checkboxFake"></span>
  </div>
  <label class="checkLabel sr--only" for="checkbox1">label</label>
</div>
CheckBoxes with Label:
<!-- Default -->
<div class="formCheck">
  <div class="checkBox">
    <input type="checkbox" id="checkbox12" />
    <span class="checkboxFake"></span>
  </div>
  <label class="checkLabel" for="checkbox12">label</label>
</div>
<!-- Curved -->
<div class="formCheck">
  <div class="checkBox checkbox--curved">
    <input type="checkbox" id="checkbox12" />
    <span class="checkboxFake"></span>
  </div>
  <label class="checkLabel" for="checkbox12">label</label>
</div>
<!-- Rounded -->
<div class="formCheck">
  <div class="checkBox">
    <input type="checkbox checkbox--rounded" id="checkbox12" />
    <span class="checkboxFake"></span>
  </div>
  <label class="checkLabel" for="checkbox12">label</label>
</div>
CheckBoxes with Groups:
Select your pizza toppings:
Select your Juice:
Select your Coffee: 
<!-- 1 -->
<fieldset>
  <legend>Select your pizza toppings:</legend>
  <div class="formCheck">
    <div class="checkBox">
      <input type="checkbox" id="checkbox123" />
      <span class="checkboxFake"></span>
    </div>
    <label class="checkLabel" for="checkbox123">Ham</label>
  </div>

  <div class="formCheck">
    <div class="checkBox">
      <input type="checkbox" id="checkbox233" checked />
      <span class="checkboxFake"></span>
    </div>
    <label class="checkLabel" for="checkbox233">Pepperoni</label>
  </div>

  <div class="formCheck">
    <div class="checkBox">
      <input type="checkbox" id="checkbox323" />
      <span class="checkboxFake"></span>
    </div>
    <label class="checkLabel" for="checkbox323">Mushrooms</label>
  </div>
</fieldset>

<!-- 2 -->
<fieldset>
  <legend>Select your Juice:</legend>
  <div class="formCheck">
    <div class="checkBox checkBox__bg checkBox--rounded">
      <input type="checkbox" id="checkbox1232" />
      <span class="checkboxFake"></span>
    </div>
    <label class="checkLabel" for="checkbox1232">mango</label>
  </div>

  <div class="formCheck">
    <div class="checkBox checkBox__bg checkBox--rounded">
      <input type="checkbox" id="checkbox2332" checked />
      <span class="checkboxFake"></span>
    </div>
    <label class="checkLabel" for="checkbox2332">peach</label>
  </div>

  <div class="formCheck">
    <div class="checkBox checkBox__bg checkBox--rounded">
      <input type="checkbox" id="checkbox3232" />
      <span class="checkboxFake"></span>
    </div>
    <label class="checkLabel" for="checkbox3232">PineApple</label>
  </div>
</fieldset>

<!-- 3 -->
<fieldset>
  <legend>Select your Coffee:</legend>
  <div class="formCheck">
    <div class="checkBox checkBox--curved">
      <input type="checkbox" id="checkbox12321" />
      <span class="checkboxFake"></span>
    </div>
    <label class="checkLabel" for="checkbox12321">Latte</label>
  </div>

  <div class="formCheck">
    <div class="checkBox checkBox--curved">
      <input type="checkbox" id="checkbox23321" checked />
      <span class="checkboxFake"></span>
    </div>
    <label class="checkLabel" for="checkbox23321">Cappuccino</label>
  </div>

  <div class="formCheck">
    <div class="checkBox checkBox--curved">
      <input type="checkbox" id="checkbox32321" />
      <span class="checkboxFake"></span>
    </div>
    <label class="checkLabel" for="checkbox32321">Espresso</label>
  </div>
</fieldset>

Radio Buttons

Unlike Checkboxes, Radio buttons are used when the users have to choose just one option.

Default
Square
Disabled State
Error State
<!-- Default -->
<div class="formRadio">
  <div class="radioBtn radioBtn--rounded">
    <input type="radio" name="fruit" id="radioBtn62" checked />
    <span class="radioBtnFake"></span>
  </div>
  <label class="radioLabel" for="radioBtn62">Mango</label>
</div>
<div class="formRadio">
  <div class="radioBtn radioBtn--rounded">
    <input type="radio" name="fruit" id="radioBtn42" />
    <span class="radioBtnFake"></span>
  </div>
  <label class="radioLabel" for="radioBtn42">Orange</label>
</div>
<div class="formRadio">
  <div class="radioBtn radioBtn--rounded">
    <input type="radio" name="fruit" id="radioBtn52" />
    <span class="radioBtnFake"></span>
  </div>
  <label class="radioLabel" for="radioBtn52">Apple</label>
</div>
<!-- Square -->
<div class="formRadio">
  <div class="radioBtn">
    <input type="radio" name="coffee" id="radioBtn12" />
    <span class="radioBtnFake"></span>
  </div>
  <label class="radioLabel" for="radioBtn12">Espresso</label>
</div>

<div class="formRadio">
  <div class="radioBtn">
    <input type="radio" name="coffee" id="radioBtn23" checked />
    <span class="radioBtnFake"></span>
  </div>
  <label class="radioLabel" for="radioBtn23">Cappuccino</label>
</div>

<div class="formRadio formRadio__error">
  <div class="radioBtn">
    <input type="radio" name="coffee" id="radioBtn32" />
    <span class="radioBtnFake"></span>
  </div>
  <label class="radioLabel" for="radioBtn32">Latte</label>
</div>
<!-- Disabled -->
<div class="formRadio">
  <div class="radioBtn radioBtn--rounded disabled">
    <input type="radio" id="radioBtn83" />
    <span class="radioBtnFake"></span>
  </div>
  <label class="radioLabel" for="radioBtn83">label</label>
</div>

<div class="formRadio">
  <div class="radioBtn disabled">
    <input type="radio" id="radioBtn93" />
    <span class="radioBtnFake"></span>
  </div>
  <label class="radioLabel" for="radioBtn93">label</label>
</div>
<!-- Error State -->
<div class="formRadio error">
  <div class="radioBtn radioBtn--rounded">
    <input type="radio" id="radioBtn731" />
    <span class="radioBtnFake"></span>
  </div>
  <label class="radioLabel" for="radioBtn731">Label</label>
</div>
<div class="formRadio error">
  <div class="radioBtn">
    <input type="radio" id="radioBtn73" />
    <span class="radioBtnFake"></span>
  </div>
  <label class="radioLabel" for="radioBtn73">Label</label>
</div>

Toggle Buttons

These On/Off buttons are made purely with CSS3 and some animated transitions. Users can flip to switch on or switch off.

Add the toggleBtn class to an element to create a Toggle Button. Inside, add an <input type="checkbox">. Next to that, create a <label> Give the <input> a unique ID and point the <label> to it with the for attribute. This makes the toggle button clickable. Also add toggle class on input with aria-hidden="true". The status of toggle button is calculated from status of aria-checked attribute.

Inside the Toggle label is screen reader-only text, which uses the .sr--only class to add accessibility feature. 

<div class="toggleBtn p--1">
  <input class="toggle" type="checkbox" id="toggleBtn" aria-hidden="true" aria-checked="true" checked />
  <label for="toggleBtn">
    <span class="sr--only">Toggle:</span>
  </label>
</div>
<div class="toggleBtn p--1 disabled">
  <input class="toggle" type="checkbox" aria-hidden="true" aria-checked="true" id="toggleBtn2" disabled />
  <label for="toggleBtn2">
    <span class="sr--only">Toggle:</span>
  </label>
</div>
<div class="toggleBtn rounded p--1">
  <input type="checkbox" id="toggleBtn3" class="toggle" aria-hidden="true" aria-checked="true" checked />
  <label for="toggleBtn3">
    <span class="sr--only">Toggle:</span>
  </label>
</div>
<div class="toggleBtn rounded filled p--1">
  <input type="checkbox" id="toggleBtn4" class="toggle" aria-hidden="true" aria-checked="true" checked />
  <label for="toggleBtn4">
    <span class="sr--only">Toggle:</span>
  </label>
</div>
<div class="toggleBtn rounded dark p--1">
  <input type="checkbox" id="toggleBtn5" class="toggle" aria-hidden="true" aria-checked="true" checked />
  <label for="toggleBtn5">
    <span class="sr--only">Toggle:</span>
  </label>
</div>

Toggle Buttons (Icons + Label)

For toggle with label, there is additional span in the label, the status of this span is updated based on the status of aria-checked attribute. 

<div class="toggleBtn p--1">
  <input type="checkbox" id="toggleBtn6" class="toggle" aria-checked="true" aria-hidden="true" checked />
  <label for="toggleBtn6">
    <span class="labelTxt">Label On</span>
  </label>
</div>
<div class="toggleBtn p--1 disabled">
  <input type="checkbox" id="toggleBtn7" class="toggle" aria-checked="false" aria-hidden="true" disabled />
  <label for="toggleBtn7">
    <span class="labelTxt">Label Off</span>
  </label>
</div>
<div class="toggleBtn rounded p--1">
  <input type="checkbox" id="toggleBtn8" class="toggle" aria-checked="true" aria-hidden="true" checked />
  <label for="toggleBtn8">
    <span class="labelTxt">Label On</span>
  </label>
</div>
<div class="toggleBtn rounded filled p--1">
  <input type="checkbox" id="toggleBtn9" class="toggle" aria-checked="true" aria-hidden="true" checked />
  <label for="toggleBtn9">
    <span class="labelTxt">Label On</span>
  </label>
</div>
<div class="toggleBtn rounded dark p--1">
  <input type="checkbox" id="toggleBtn10" class="toggle" aria-checked="false" aria-hidden="true" />
  <label for="toggleBtn10">
    <span class="labelTxt">Label Off</span>
  </label>
</div>

Example Form

Please Select any option
Select your Languages:
Select your Cofee
<form class="col--9 p--5">
<div class="row mb--3">
  <div class="formGroup col--6">
   <label for="Firstnamee" class="">First Name</label>
   <input
      type="text"
      class="formControl"
      id="Firstnamee"
      placeholder="First Name"
      ""
   />
  </div>

  <div class="formGroup col--6">
   <label for="lastName" class="">Last Name</label>
   <input
      type="text"
      class="formControl formControl--curved"
      placeholder="Last Name"
      id="lastName"
      ""
   />
  </div>
</div>

<div class="row mb--3">
  <div class="formGroup col--12">
   <label for="Email" class="">Email</label>
   <input
      type="email"
      class="formControl"
      id="Email"
      placeholder="Enter Email"
      ""
      required
   />
  </div>
</div>

<div class="row mb--3">
  <div class="formGroup col--12">
   <label for="pass" class="">Password</label>
   <input
      type="password"
      class="formControl"
      id="pass"
      placeholder="Enter Password"
      ""
      required
   />
  </div>
</div>

<div class="row mb--3">
  <!--simple select-->
  <div class="formGroup col--12 mr--5">
   <label for="gender">Gender</label>
   <div class="formControlHolder formControlHolder__select">
     <select class="formControl" name="course" id="gender" required>
      <option value="">Your Gender</option>

      <option>Male</option>

      <option>Female</option>

      <option>Other</option>
     </select>
     <button
        type="button"
        class="icon-clear clearCrossBtn"
        aria-label="Label"
     ></button>
     <span class="icon-info errorOption"></span>
   </div>
  </div>
  <!--/Simple Select-->
</div>

<div class="row mb--4 justify--content--between">
  <fieldset class="col--3 ">
   <legend>Select your Languages:</legend>

   <div class="formCheck">
     <div class="checkBox">
      <input type="checkbox" id="checkboxs"/>
      <span class="checkboxFake"></span>
     </div>
     <label class="checkLabel" for="checkboxs">Urdu</label>
   </div>

   <div class="formCheck">
     <div class="checkBox">
      <input type="checkbox" id="checkbox233s" checked/>
      <span class="checkboxFake"></span>
     </div>
     <label class="checkLabel" for="checkbox233s">English</label>
   </div>

   <div class="formCheck">
     <div class="checkBox">
      <input type="checkbox" id="checkbox323s"/>
      <span class="checkboxFake"></span>
     </div>
     <label class="checkLabel" for="checkbox323s">Persian</label>
   </div>

   <div class="formCheck">
     <div class="checkBox">
      <input type="checkbox" id="checkbox323sx"/>
      <span class="checkboxFake"></span>
     </div>
     <label class="checkLabel" for="checkbox323sx">Hindi</label>
   </div>
  </fieldset>
  <fieldset class="col--3">
   <strong class="mb--3 d--flex">Select your Cofee</strong>
   <div class="formRadio">
     <div class="radioBtn">
      <input type="radio" name="coffee" id="radioBtn123"/>
      <span class="radioBtnFake"></span>
     </div>
     <label class="radioLabel" for="radioBtn123">Espresso</label>
   </div>

   <div class="formRadio">
     <div class="radioBtn">
      <input type="radio" name="coffee" id="radioBtn233" checked/>
      <span class="radioBtnFake"></span>
     </div>
     <label class="radioLabel" for="radioBtn233">Cappuccino</label>
   </div>

   <div class="formRadio">
     <div class="radioBtn">
      <input type="radio" name="coffee" id="radioBtn323"/>
      <span class="radioBtnFake"></span>
     </div>
     <label class="radioLabel" for="radioBtn323">Latte</label>
   </div>
  </fieldset>
</div>

<div class="row">
  <div class="col-12 d--flex justify--content--end">
   <button type="submit" class="btn btn--primary btn--outline">
     Submit Form
   </button>
  </div>
</div>
 </form>