Documentation

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

<divclass="form-group"><labelclass="form-label">Image Check</label><divclass="row gutters-sm"><divclass="col-sm-2"><labelclass="imagecheck mb-4"><inputname="imagecheck"type="checkbox"value="1"class="imagecheck-input"/><figureclass="imagecheck-figure"><imgsrc="./demo/photos/nathan-anderson-316188-500.jpg"alt="}"class="imagecheck-image"></figure></label></div><divclass="col-sm-2"><labelclass="imagecheck mb-4"><inputname="imagecheck"type="checkbox"value="2"class="imagecheck-input"checked/><figureclass="imagecheck-figure"><imgsrc="./demo/photos/nathan-dumlao-287713-500.jpg"alt="}"class="imagecheck-image"></figure></label></div><divclass="col-sm-2"><labelclass="imagecheck mb-4"><inputname="imagecheck"type="checkbox"value="3"class="imagecheck-input"/><figureclass="imagecheck-figure"><imgsrc="./demo/photos/nicolas-picard-208276-500.jpg"alt="}"class="imagecheck-image"></figure></label></div><divclass="col-sm-2"><labelclass="imagecheck mb-4"><inputname="imagecheck"type="checkbox"value="4"class="imagecheck-input"checked/><figureclass="imagecheck-figure"><imgsrc="./demo/photos/oskar-vertetics-53043-500.jpg"alt="}"class="imagecheck-image"></figure></label></div><divclass="col-sm-2"><labelclass="imagecheck mb-4"><inputname="imagecheck"type="checkbox"value="5"class="imagecheck-input"/><figureclass="imagecheck-figure"><imgsrc="./demo/photos/priscilla-du-preez-181896-500.jpg"alt="}"class="imagecheck-image"></figure></label></div><divclass="col-sm-2"><labelclass="imagecheck mb-4"><inputname="imagecheck"type="checkbox"value="6"class="imagecheck-input"/><figureclass="imagecheck-figure"><imgsrc="./demo/photos/ricardo-gomez-angel-262359-500.jpg"alt="}"class="imagecheck-image"></figure></label></div></div></div>

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

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

<fieldsetclass="form-fieldset"><divclass="form-group"><labelclass="form-label">Full name<spanclass="form-required">*</span></label><inputtype="text"class="form-control"/></div><divclass="form-group"><labelclass="form-label">Company<spanclass="form-required">*</span></label><inputtype="text"class="form-control"/></div><divclass="form-group"><labelclass="form-label">Email<spanclass="form-required">*</span></label><inputtype="email"class="form-control"/></div><divclass="form-group mb-0"><labelclass="form-label">Phone number</label><inputtype="tel"class="form-control"/></div></fieldset>