Form #permalink

Textarea #permalink 

<div class="e-row">
  <div class="e-col-12">
    <div class="e-field">
      <label for="input" class="e-field__label">Form input label <span class="e-field__label__info"> <b>150</b> character left</span></label>
      <textarea name="text" class="e-input e-input-textarea" id="text" placeholder="textarea"></textarea>
    </div>
  </div>
</div>

Select #permalink

Default styling
.e-select-small
small
.e-select-medium
medium
.e-select-large
large 
<div class="e-row">
  <div class="e-col-12">
    <div class="e-field">
      <label class="e-field__label" for="some_namesome_name">Native select</label>
      <select class="e-select " name="some_name" id="some_namesome_name">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3" selected>option3 ejqwkej qwkj ekqwje kqwjek jqkwje kqwjek qjwkejq kwjeqkwj ekqjw kejkqwj kejqwk ej</option>
        <option value="option4" disabled>option4</option>
      </select>
    </div>

    <div class="e-field">
      <label class="e-field__label" for="some_namesome_name2">Select2 few items</label>
      <select class="e-select e-select__select2 " name="some_name1" id="some_namesome_name1">
        <option value="option1" selected>select2 option1</option>
        <option value="option2">select2 option2</option>
        <option value="option3">select2 option3</option>
        <option value="option4" disabled>select2 option4</option>
      </select>
    </div>


    <div class="e-field">
      <label class="e-field__label" for="some_namesome_name2">Select2 more items</label>
      <select class="e-select e-select__select2 " name="some_name2" id="some_namesome_name2">
        <option value="option1" selected>select2 option1</option>
        <option value="option2">select2 option2</option>
        <option value="option3">select2 option3</option>
        <option value="option4" disabled>select2 option4</option>
        <option value="option5">select2 option5 rqwejrk wjqek jrkqwej rkjwqek jrkqwje krjwqkejrk wqjkerj kqwje krjk</option>
      </select>
    </div>
  </div>
</div>

Switch #permalink 

<div class="e-switch">
    <input type="checkbox" class="e-switch__input" name="consent" value="1" id="switch">
    <label class="e-switch__toggle" for="switch"></label>
</div>

Checkbox #permalink

Default styling
.disabled
disabled
.disabled.checked
checked 
<div class="e-row">
    <div class="e-col-12">
        <input type="checkbox" name="name" id="id-" class="e-checkbox"  /><label for="id-" >Checkbox label </label>
    </div>
</div>

Input #permalink

Default styling
.e-input-small
small
.e-input-medium
medium
.e-input-large
large 
<div class="e-field">
  <label for="input" class="e-field__label">Form input label <span class="e-tooltip" data-tooltip="tooltip data lorem ipsum"><svg class="e-icon e-icon-label" ><use xlink:href="#question" ></use></svg></span></label>
  <input class="e-input " type="text"  placeholder="Form input" />
</div>

Input grid example #permalink 

<div class="e-row">
  <div class="e-col-4">
    <div class="e-field">
      <label for="input" class="e-field__label">Form input label <span class="e-tooltip" data-tooltip="tooltip data lorem ipsum"><svg class="e-icon e-icon-label" ><use xlink:href="#question" ></use></svg></span></label>
      <input class="e-input " type="text"  placeholder="Form input" />
    </div>
  </div>
  <div class="e-col-4">
    <div class="e-field">
      <label for="input" class="e-field__label">Form input label</label>
      <input class="e-input" type="number" placeholder="Form input" />
    </div>
  </div>
  <div class="e-col-4">
    <div class="e-field">
      <label for="input" class="e-field__label">Form input label</label>
      <input class="e-input" type="text" placeholder="Form input" disabled />
    </div>
  </div>
</div>

Radio #permalink

Default styling
.disabled
disabled 
<div class="e-row">
  <div class="e-col-12">
    <input type="radio" name="name-" id="id1-" class="e-radio"  /><label for="id1-" >Radio label </label>
    <input type="radio" name="name-" id="id2-" class="e-radio" checked  /><label for="id2-" >Radio label </label>
  </div>
</div>

Field postfix #permalink

File input
File input
File input
File input 
<div class="e-field" data-upload>
  <label for="input" class="e-field__label">Form input label</label>
  <div class="e-field__postfix">
      <span class="e-field__postfix__cell">
        <input class="e-input" type="text"  placeholder="example.ppt" readonly />
      </span>
      <span class="e-field__postfix__cell e-field__postfix__cell-short">
        <span class="e-btn e-btn-fileinput ">
          <svg class="e-icon e-icon-white e-icon-folder-open">
            <use xlink:href="#folder-open"></use>
          </svg> File input<input type="file" name="name" id="id-fileinput"/>
        </span>
      </span>
  </div>
</div>


<div class="e-field" data-upload>
  <label for="input" class="e-field__label">Form input label</label>
  <div class="e-field__postfix">
      <span class="e-field__postfix__cell">
        <input class="e-input" type="text"  placeholder="example.ppt" readonly />
      </span>
      <span class="e-field__postfix__cell e-field__postfix__cell-short">
        <span class="e-btn e-btn-fileinput ">
          <svg class="e-icon e-icon-white e-icon-folder-open">
            <use xlink:href="#folder-open"></use>
          </svg> File input<input type="file" name="name" id="id-fileinput"/>
        </span>
      </span>
  </div>
</div>


<div class="e-field" data-upload>
  <label for="input" class="e-field__label">Form input label</label>
  <div class="e-field__postfix">
      <span class="e-field__postfix__cell">
        <input class="e-input" type="text"  placeholder="example.ppt" readonly />
      </span>
      <span class="e-field__postfix__cell e-field__postfix__cell-short">
        <span class="e-btn e-btn-fileinput ">
          <svg class="e-icon e-icon-white e-icon-folder-open">
            <use xlink:href="#folder-open"></use>
          </svg> File input<input type="file" name="name" id="id-fileinput"/>
        </span>
      </span>
  </div>
</div>


<div class="e-field" data-upload>
  <label for="input" class="e-field__label">Form input label</label>
  <div class="e-field__postfix">
      <span class="e-field__postfix__cell">
        <input class="e-input" type="text"  placeholder="example.ppt" readonly />
      </span>
      <span class="e-field__postfix__cell e-field__postfix__cell-short">
        <span class="e-btn e-btn-fileinput ">
          <svg class="e-icon e-icon-white e-icon-folder-open">
            <use xlink:href="#folder-open"></use>
          </svg> File input<input type="file" name="name" id="id-fileinput"/>
        </span>
      </span>
  </div>
</div>

Field prefix #permalink 

<div class="e-field">
  <label for="input" class="e-field__label">Form input label</label>
  <div class="e-field__prefix">
    <span class="e-field__prefix__icon">
      <svg class="e-icon"><use xlink:href="#calendar-o" ></use></svg>
    </span>
    <input class="e-input" type="text"  placeholder="mm/dd/yyyy" />
  </div>
</div>