## Documentation

# Image check

Add an image check to your form and give users visually attractive options to choose from.

    <div class="mb-3">
      <label class="form-label">Image Check</label>
      <div class="row g-2">
        <div class="col-6 col-sm-4">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
            <span class="form-imagecheck-figure">
              <img src="..." alt="Breakfast served with tea, bread and eggs" class="form-imagecheck-image">
            </span>
          </label>
        </div>
        <div class="col-6 col-sm-4">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input"  checked/>
            <span class="form-imagecheck-figure">
              <img src="..." alt="Book, fairy lights" class="form-imagecheck-image">
            </span>
          </label>
        </div>
        <div class="col-6 col-sm-4">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
            <span class="form-imagecheck-figure">
              <img src="..." alt="Healthy Dinner" class="form-imagecheck-image">
            </span>
          </label>
        </div>
        <div class="col-6 col-sm-4">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input"  checked/>
            <span class="form-imagecheck-figure">
              <img src="..." alt="Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water" class="form-imagecheck-image">
            </span>
          </label>
        </div>
        <div class="col-6 col-sm-4">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
            <span class="form-imagecheck-figure">
              <img src="..." alt="Beautiful blonde woman on a wooden pier by the lake" class="form-imagecheck-image">
            </span>
          </label>
        </div>
        <div class="col-6 col-sm-4">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
            <span class="form-imagecheck-figure">
              <img src="..." alt="Still life of mandarin oranges with leaves" class="form-imagecheck-image">
            </span>
          </label>
        </div>
        <div class="col-6 col-sm-4">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input"  checked/>
            <span class="form-imagecheck-figure">
              <img src="..." alt="Blonde woman having a healthy snack at the wooden pier" class="form-imagecheck-image">
            </span>
          </label>
        </div>
        <div class="col-6 col-sm-4">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
            <span class="form-imagecheck-figure">
              <img src="..." alt="Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed" class="form-imagecheck-image">
            </span>
          </label>
        </div>
        <div class="col-6 col-sm-4">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
            <span class="form-imagecheck-figure">
              <img src="..." alt="Overhead view of macarons on a marble slab" class="form-imagecheck-image">
            </span>
          </label>
        </div>
      </div>
    </div>

    <div class="mb-3">
      <label class="form-label">Person Check</label>
      <div class="row g-2">
        <div class="col-auto">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
            <span class="form-imagecheck-figure">
              <span class="form-imagecheck-image">
                <span class="avatar avatar-md" style="background-image: url(...)"></span>
              </span>
            </span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input"  checked/>
            <span class="form-imagecheck-figure">
              <span class="form-imagecheck-image">
                <span class="avatar avatar-md">HS</span>
              </span>
            </span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
            <span class="form-imagecheck-figure">
              <span class="form-imagecheck-image">
                <span class="avatar avatar-md" style="background-image: url(...)"></span>
              </span>
            </span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input"  checked/>
            <span class="form-imagecheck-figure">
              <span class="form-imagecheck-image">
                <span class="avatar avatar-md" style="background-image: url(...)"></span>
              </span>
            </span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
            <span class="form-imagecheck-figure">
              <span class="form-imagecheck-image">
                <span class="avatar avatar-md" style="background-image: url(...)"></span>
              </span>
            </span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
            <span class="form-imagecheck-figure">
              <span class="form-imagecheck-image">
                <span class="avatar avatar-md">SA</span>
              </span>
            </span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input"  checked/>
            <span class="form-imagecheck-figure">
              <span class="form-imagecheck-image">
                <span class="avatar avatar-md" style="background-image: url(...)"></span>
              </span>
            </span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
            <span class="form-imagecheck-figure">
              <span class="form-imagecheck-image">
                <span class="avatar avatar-md" style="background-image: url(...)"></span>
              </span>
            </span>
          </label>
        </div>
        <div class="col-auto">
          <label class="form-imagecheck mb-2">
            <input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
            <span class="form-imagecheck-figure">
              <span class="form-imagecheck-image">
                <span class="avatar avatar-md" style="background-image: url(...)"></span>
              </span>
            </span>
          </label>
        </div>
      </div>
    </div>