Form components

<div class="form-group">
    <label class="form-label">Color Input</label>
    <div class="row gutters-xs">
    <div class="col-auto">
        <label class="colorinput">
        <input name="color" type="checkbox" value="azure" class="colorinput-input" />
        <span class="colorinput-color bg-azure"></span>
        </label>
    </div>
    <div class="col-auto">
        <label class="colorinput">
        <input name="color" type="checkbox" value="indigo" class="colorinput-input"  checked/>
        <span class="colorinput-color bg-indigo"></span>
        </label>
    </div>
    <div class="col-auto">
        <label class="colorinput">
        <input name="color" type="checkbox" value="purple" class="colorinput-input" />
        <span class="colorinput-color bg-purple"></span>
        </label>
    </div>
    <div class="col-auto">
        <label class="colorinput">
        <input name="color" type="checkbox" value="pink" class="colorinput-input" />
        <span class="colorinput-color bg-pink"></span>
        </label>
    </div>
    <div class="col-auto">
        <label class="colorinput">
        <input name="color" type="checkbox" value="red" class="colorinput-input" />
        <span class="colorinput-color bg-red"></span>
        </label>
    </div>
    <div class="col-auto">
        <label class="colorinput">
        <input name="color" type="checkbox" value="orange" class="colorinput-input" />
        <span class="colorinput-color bg-orange"></span>
        </label>
    </div>
    <div class="col-auto">
        <label class="colorinput">
        <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
        <span class="colorinput-color bg-yellow"></span>
        </label>
    </div>
    <div class="col-auto">
        <label class="colorinput">
        <input name="color" type="checkbox" value="lime" class="colorinput-input" />
        <span class="colorinput-color bg-lime"></span>
        </label>
    </div>
    <div class="col-auto">
        <label class="colorinput">
        <input name="color" type="checkbox" value="green" class="colorinput-input" />
        <span class="colorinput-color bg-green"></span>
        </label>
    </div>
    <div class="col-auto">
        <label class="colorinput">
        <input name="color" type="checkbox" value="teal" class="colorinput-input" />
        <span class="colorinput-color bg-teal"></span>
        </label>
    </div>
    </div>
</div>

<div class="form-group">
    <label class="form-label">Image Check</label>
    <div class="row gutters-sm">
    <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="./demo/photos/nathan-anderson-316188-500.jpg" alt="}" 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="./demo/photos/nathan-dumlao-287713-500.jpg" alt="}" 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="./demo/photos/nicolas-picard-208276-500.jpg" alt="}" 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="./demo/photos/oskar-vertetics-53043-500.jpg" alt="}" 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="./demo/photos/priscilla-du-preez-181896-500.jpg" alt="}" 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="./demo/photos/ricardo-gomez-angel-262359-500.jpg" alt="}" class="imagecheck-image">
        </figure>
        </label>
    </div>
    </div>
</div>

<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>

<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>

<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>