tabler/docs/ui/forms/form-image-check.mdx

---
title: Image check
---

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

```html example centered columns="2" height="15rem"
<div class="mb-3">
  <label class="form-label">Image Check</label>
  <div class="row g-2">
    <div class="col-3">
      <label class="form-imagecheck">
        <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="/samples/photos/everything-you-need-to-work-from-your-bed-2.jpg" alt="" class="form-imagecheck-image" />
        </span>
      </label>
    </div>
    <div class="col-3">
      <label class="form-imagecheck">
        <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input" checked />
        <span class="form-imagecheck-figure">
          <img src="/samples/photos/color-palette-guide-sample-colors-catalog-.jpg" alt="" class="form-imagecheck-image" />
        </span>
      </label>
    </div>
    <div class="col-3">
      <label class="form-imagecheck">
        <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="/samples/photos/woman-read-book-and-drink-coffee-2.jpg" alt="" class="form-imagecheck-image" />
        </span>
      </label>
    </div>
    <div class="col-3">
      <label class="form-imagecheck">
        <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input" checked />
        <span class="form-imagecheck-figure">
          <img src="/samples/photos/stylish-workspace-with-macbook-pro-2.jpg" alt="" class="form-imagecheck-image" />
        </span>
      </label>
    </div>
  </div>
</div>
```

```html
<label class="form-imagecheck">
  <input name="" type="checkbox" value="" class="form-imagecheck-input" checked />
  <span class="form-imagecheck-figure">
    <img src="..." alt="" class="form-imagecheck-image" />
  </span>
</label>
```

```html example centered columns="2" height="15rem"
<div class="mb-3">
  <label class="form-label">Image Check Radio</label>
  <div class="row g-2">
    <div class="col-3">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck-radio" type="radio" value="1" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="/samples/photos/woman-drinking-hot-tea-in-her-home-office.jpg" alt="" class="form-imagecheck-image" />
        </span>
      </label>
    </div>
    <div class="col-3">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck-radio" type="radio" value="2" class="form-imagecheck-input" checked />
        <span class="form-imagecheck-figure">
          <img src="/samples/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-3.jpg" alt="" class="form-imagecheck-image" />
        </span>
      </label>
    </div>
    <div class="col-3">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck-radio" type="radio" value="3" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="/samples/photos/beautiful-blonde-woman-relaxing-with-a-can-of-coke-on-a-tree-stump-by-the-beach.jpg" alt="" class="form-imagecheck-image" />
        </span>
      </label>
    </div>
    <div class="col-3">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck-radio" type="radio" value="4" class="form-imagecheck-input" checked />
        <span class="form-imagecheck-figure">
          <img src="/samples/photos/book-on-the-grass.jpg" alt="" class="form-imagecheck-image" />
        </span>
      </label>
    </div>
  </div>
</div>
```

```html
<label class="form-imagecheck">
  <input name="form-imagecheck-radio" type="radio" value="1" class="form-imagecheck-input" />
  <span class="form-imagecheck-figure">
    <img src="/samples/photos/woman-drinking-hot-tea-in-her-home-office.jpg" alt="" class="form-imagecheck-image" />
  </span>
</label>
```

```html example centered columns="1" height="15rem"
<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(/samples/avatars/057f.jpg)"></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(/samples/avatars/062m.jpg)"></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(/samples/avatars/070m.jpg)"></span>
          </span>
        </span>
      </label>
    </div>
  </div>
</div>
```

```html
<label class="form-imagecheck">
  <input name="" type="checkbox" value="" 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>
```