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.
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 style the image 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:
Radio buttons
If you want to use the image check as a radio button, you can change the input type to radio.
<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 the .avatar instead of the image.
<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>
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like Tabler? tweet about it!
Support Tabler's development: Github Sponsors
