Form components

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Color input

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<div class="form-group">
  <label class="form-label">Color Input</label>
  <div class="d-flex">
    <label class="colorinput mr-2">
      <input name="color" type="checkbox" value="azure" class="colorinput-input" />
      <span class="colorinput-color bg-azure"></span>
    </label>
    <label class="colorinput mr-2">
      <input name="color" type="checkbox" value="indigo" class="colorinput-input"  checked/>
      <span class="colorinput-color bg-indigo"></span>
    </label>
    <label class="colorinput mr-2">
      <input name="color" type="checkbox" value="purple" class="colorinput-input" />
      <span class="colorinput-color bg-purple"></span>
    </label>
    <label class="colorinput mr-2">
      <input name="color" type="checkbox" value="pink" class="colorinput-input" />
      <span class="colorinput-color bg-pink"></span>
    </label>
    <label class="colorinput mr-2">
      <input name="color" type="checkbox" value="red" class="colorinput-input" />
      <span class="colorinput-color bg-red"></span>
    </label>
    <label class="colorinput mr-2">
      <input name="color" type="checkbox" value="orange" class="colorinput-input" />
      <span class="colorinput-color bg-orange"></span>
    </label>
    <label class="colorinput mr-2">
      <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
      <span class="colorinput-color bg-yellow"></span>
    </label>
    <label class="colorinput mr-2">
      <input name="color" type="checkbox" value="lime" class="colorinput-input" />
      <span class="colorinput-color bg-lime"></span>
    </label>
    <label class="colorinput mr-2">
      <input name="color" type="checkbox" value="green" class="colorinput-input" />
      <span class="colorinput-color bg-green"></span>
    </label>
    <label class="colorinput mr-2">
      <input name="color" type="checkbox" value="teal" class="colorinput-input" />
      <span class="colorinput-color bg-teal"></span>
    </label>
  </div>
</div>

Image input

Image Check

<div class="form-group">
  <label class="form-label">Image Check</label>
  <div class="row sm-gutters">
    <div class="col-sm-2">
      <label class="imagecheck mb-4">
        <input name="imagecheck" type="checkbox" value="1" class="imagecheck-input"  />
        <figure class="imagecheck-figure">
          <img src="./assets/images/faces/female/12.jpg" alt="Amanda Hunt" class="imagecheck-image">
        </figure>
      </label>
    </div>
    <div class="col-sm-2">
      <label class="imagecheck mb-4">
        <input name="imagecheck" type="checkbox" value="2" class="imagecheck-input"  checked />
        <figure class="imagecheck-figure">
          <img src="./assets/images/faces/female/21.jpg" alt="Laura Weaver" class="imagecheck-image">
        </figure>
      </label>
    </div>
    <div class="col-sm-2">
      <label class="imagecheck mb-4">
        <input name="imagecheck" type="checkbox" value="3" class="imagecheck-input"  />
        <figure class="imagecheck-figure">
          <img src="./assets/images/faces/female/29.jpg" alt="Margaret Berry" class="imagecheck-image">
        </figure>
      </label>
    </div>
    <div class="col-sm-2">
      <label class="imagecheck mb-4">
        <input name="imagecheck" type="checkbox" value="4" class="imagecheck-input"  checked />
        <figure class="imagecheck-figure">
          <img src="./assets/images/faces/female/2.jpg" alt="Nancy Herrera" class="imagecheck-image">
        </figure>
      </label>
    </div>
    <div class="col-sm-2">
      <label class="imagecheck mb-4">
        <input name="imagecheck" type="checkbox" value="5" class="imagecheck-input"  />
        <figure class="imagecheck-figure">
          <img src="./assets/images/faces/male/34.jpg" alt="Edward Larson" class="imagecheck-image">
        </figure>
      </label>
    </div>
    <div class="col-sm-2">
      <label class="imagecheck mb-4">
        <input name="imagecheck" type="checkbox" value="6" class="imagecheck-input"  />
        <figure class="imagecheck-figure">
          <img src="./assets/images/faces/female/11.jpg" alt="Joan Hanson" class="imagecheck-image">
        </figure>
      </label>
    </div>
  </div>
</div>

Icon input

<div class="form-group">
  <label class="form-label">Icon input</label>
  <div class="input-icon mb-3">
    <input type="text" class="form-control" placeholder="Search for...">
    <span class="input-icon-addon">
      <i class="fe fe-search"></i>
    </span>
  </div>
  <div class="input-icon">
    <span class="input-icon-addon">
      <i class="fe fe-user"></i>
    </span>
    <input type="text" class="form-control" placeholder="Username">
  </div>
</div>

Toggle switches

Option 1 Option 2 Option 3

<div class="form-group">
  <div class="form-label">Toggle switches</div>
  <div class="custom-switches-stacked">
    <label class="custom-switch">
      <input type="radio" name="option" value="1" class="custom-switch-input" checked>
      <span class="custom-switch-indicator"></span>
      <span class="custom-switch-description">Option 1</span>
    </label>
    <label class="custom-switch">
      <input type="radio" name="option" value="2" class="custom-switch-input">
      <span class="custom-switch-indicator"></span>
      <span class="custom-switch-description">Option 2</span>
    </label>
    <label class="custom-switch">
      <input type="radio" name="option" value="3" class="custom-switch-input">
      <span class="custom-switch-indicator"></span>
      <span class="custom-switch-description">Option 3</span>
    </label>
  </div>
</div>

Form fieldset

Full name*

Company*

Email*

Phone number

<fieldset class="form-fieldset">
  <div class="form-group">
    <label class="form-label">Full name<span class="form-required">*</span></label>
    <input type="text" class="form-control" />
  </div>
  <div class="form-group">
    <label class="form-label">Company<span class="form-required">*</span></label>
    <input type="text" class="form-control" />
  </div>
  <div class="form-group">
    <label class="form-label">Email<span class="form-required">*</span></label>
    <input type="email" class="form-control" />
  </div>
  <div class="form-group mb-0">
    <label class="form-label">Phone number</label>
    <input type="tel" class="form-control" />
  </div>
</fieldset>