tabler/docs/content/ui/forms/form-image-check.md

title, summary, description

title	summary	description
Image check	The image check is a great way to make your form more user-friendly and engaging. You can use the image check to create a visually appealing form that will help users make decisions quickly and easily.	Add visual appeal to forms with images.

Default markup

To build an image check, you need to use the .form-imagecheck class and the .form-imagecheck-input class for the input element. You can also use the .form-imagecheck-figure class to display the custom checkbox and the .form-imagecheck-image class to style the image itself.

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

Look at the examples below to see how the image check works:

{% capture html -%}

Image Check

{%- endcapture %} {% include "docs/example.html" html=html %}

Radio buttons

If you want to use the image check as a radio button, you can change the input type to radio.

{% capture html -%}

Image Check Radio

{%- endcapture %} {% include "docs/example.html" html=html %}

<label class="form-imagecheck">
  <input name="..." type="radio" value="1" class="form-imagecheck-input" />
  <span class="form-imagecheck-figure">
    <img src="..." alt="" class="form-imagecheck-image" />
  </span>
</label>

Avatars

If you want to use the image check with avatars, you can use an avatar component instead of an image.

{% capture html -%}

Person Check

HS

{%- endcapture %} {% include "docs/example.html" html=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>