How to create a custom checkbox with HTML elements in Vuetify
Vuetify provides a nice checkbox which can be easy added in the user interfaces. Unfortunatelly it can't be customized as we need. For this I have created a custom checkbox in HTML and using CSS. This video shows how works my checkbox which I will use in my Social Scheduler app for profiles selection.
Transcript
00:00While vitify's checkbox component is visually appealing,
00:11it currently lacks the flexibility to incorporate custom HTML elements for customization.
00:25In this video, I'll show how I built a custom checkbox using the HTML elements I wanted.
00:40And this is the code which displays the basic checkbox in vitify.
00:50Now I will replace it with my custom checkbox.
00:59My checkbox is associated with a label that contains an image, icon, and a small tag.
01:26When I click on this label, the checkbox is checked or unchecked.
01:38This is to ID and for attribute.
01:44The icon is displayed over the image because its position is absolute.
02:00And when the checkbox is checked, the icon background color is changed.
02:15Same for the small tag.
02:24And this is my custom checkbox.
02:29I'm going to use it to allow users to select the profiles where will be published posts on social networks.