Form components - Documentation - tabler.github.io - a responsive, flat and full featured admin template

Jane Pearson Administrator

# Documentation

Browse source code
Introduction
Alerts Avatars Buttons Colors Cards Charts Form components Tags Typography
Edit this page

## Form components

### Color input

Color Input

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

### Image input

Image Check

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

### Icon input

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

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>