## Documentation

# Color check

Your input controls can come in a variety of colors, depending on your preferences. Click here to see the list of available colors.

    <div class="mb-3">
      <label class="form-label">Color Input</label>
      <div class="row g-2">
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color" type="radio" value="dark" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-dark"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput form-colorinput-light">
            <input name="color" type="radio" value="white" class="form-colorinput-input"  checked/>
            <span class="form-colorinput-color bg-white"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color" type="radio" value="blue" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-blue"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color" type="radio" value="azure" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-azure"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color" type="radio" value="indigo" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-indigo"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color" type="radio" value="purple" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-purple"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color" type="radio" value="pink" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-pink"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color" type="radio" value="red" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-red"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color" type="radio" value="orange" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-orange"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color" type="radio" value="yellow" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-yellow"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color" type="radio" value="lime" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-lime"></span>
          </label>
        </div>
      </div>
    </div>

    <div class="mb-3">
      <label class="form-label">Color Input</label>
      <div class="row g-2">
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color-rounded" type="radio" value="dark" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-dark rounded-circle"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput form-colorinput-light">
            <input name="color-rounded" type="radio" value="white" class="form-colorinput-input"  checked/>
            <span class="form-colorinput-color bg-white rounded-circle"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color-rounded" type="radio" value="blue" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-blue rounded-circle"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color-rounded" type="radio" value="azure" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-azure rounded-circle"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color-rounded" type="radio" value="indigo" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-indigo rounded-circle"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color-rounded" type="radio" value="purple" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-purple rounded-circle"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color-rounded" type="radio" value="pink" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-pink rounded-circle"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color-rounded" type="radio" value="red" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-red rounded-circle"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color-rounded" type="radio" value="orange" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-orange rounded-circle"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color-rounded" type="radio" value="yellow" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-yellow rounded-circle"></span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-colorinput">
            <input name="color-rounded" type="radio" value="lime" class="form-colorinput-input" />
            <span class="form-colorinput-color bg-lime rounded-circle"></span>
          </label>
        </div>
      </div>
    </div>

## Input color picker

Add an color picker to your form to let users customise it according to their preferences.

    <div class="mb-3">
      <label class="form-label">Color picker</label>
      <input type="color" class="form-control form-control-color" value="#206bc4" title="Choose your color">
    </div>