Image check

Checkboxes and radios that use an image as the label, for picking a template, a theme or a product.

Default markup

An image check is a .form-imagecheck label with a hidden .form-imagecheck-input, a .form-imagecheck-figure that draws the check mark, and a .form-imagecheck-image for the picture.

<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>
<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="image" type="checkbox" value="1" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="/static/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="image" type="checkbox" value="2" class="form-imagecheck-input" checked />
        <span class="form-imagecheck-figure">
          <img src="/static/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="image" type="checkbox" value="3" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="/static/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="image" type="checkbox" value="4" class="form-imagecheck-input" checked />
        <span class="form-imagecheck-figure">
          <img src="/static/photos/stylish-workspace-with-macbook-pro-2.jpg" alt class="form-imagecheck-image" />
        </span>
      </label>
    </div>
  </div>
</div>

Radio buttons

Change the input type to radio when only one option can be picked.

<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="image" type="radio" value="1" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="/static/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="image" type="radio" value="2" class="form-imagecheck-input" checked />
        <span class="form-imagecheck-figure">
          <img src="/static/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="image" type="radio" value="3" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="/static/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="image" type="radio" value="4" class="form-imagecheck-input" checked />
        <span class="form-imagecheck-figure">
          <img src="/static/photos/book-on-the-grass.jpg" alt class="form-imagecheck-image" />
        </span>
      </label>
    </div>
  </div>
</div>

Avatars

Use an avatar instead of an image when the options are people.

<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="image" type="checkbox" value="1" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <span class="form-imagecheck-image">
            <span class="avatar avatar-xl" style="background-image: url(/static/avatars/057f.jpg)"></span>
          </span>
        </span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-imagecheck mb-2">
        <input name="image" type="checkbox" value="2" class="form-imagecheck-input" checked />
        <span class="form-imagecheck-figure">
          <span class="form-imagecheck-image">
            <span class="avatar avatar-xl">HS</span>
          </span>
        </span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-imagecheck mb-2">
        <input name="image" type="checkbox" value="3" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <span class="form-imagecheck-image">
            <span class="avatar avatar-xl" style="background-image: url(/static/avatars/062m.jpg)"></span>
          </span>
        </span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-imagecheck mb-2">
        <input name="image" type="checkbox" value="4" class="form-imagecheck-input" checked />
        <span class="form-imagecheck-figure">
          <span class="form-imagecheck-image">
            <span class="avatar avatar-xl" style="background-image: url(/static/avatars/070m.jpg)"></span>
          </span>
        </span>
      </label>
    </div>
  </div>
</div>

Accessibility

  • An image check is a checkbox or a radio with a picture as its label. Keep the input in the markup so the control works and the state is exposed.
  • A picture is not a name. Add text in the label, or an aria-label on the input, saying what the option is.
  • Selection must not rest on the border color alone. Add a checkmark or another visible mark for the selected state.
  • Wrap a set of them in a fieldset with a legend, so the group has a name.
Select group

Offer sets of options with select groups - labeled, icon-only, or pill-shaped controls built on checkboxes and radios.

Color check

Checkboxes and radios styled as color swatches, plus the native color picker input.

On this page

130 sleek illustrations for your startup's visual identity.