Material Checkbox without Material UI (only CSS)

No video for this lesson

The main HTML is very simple, having just two key elements input and span.

PortableText [components.type] is missing "code"

In order to create the checkmark it is nothing more than a bottom, and left border colored green. The key here is that it is then rotated 45deg to make it look like a check mark.

PortableText [components.type] is missing "code"

This JavaScript is not required, it shows the checked status.

PortableText [components.type] is missing "code"

Below is a fully working example!

PortableText [components.type] is missing "codepen"
Draft off Turn on