Checkbox input field

[LW-54]

Is your Feature Request Related to a Problem?

No response

Describe the Feature you'd Like

I would like to view toggle inputs as checkboxes or have a separate checkbox input

Additional Context

No response

[Cube707]

I was curious about this and implemented a quick and dirty version of this.

These CSS styles are enough to implement a simple checkbox version of the toggle. All you need to do is to assigne the class to the input elment.

.checkbox {
    .checkbox-container {
        aspect-ratio: 1;
        width: unset;
        &::after {
            opacity: 0;
            transform: unset;
            left: 2px;
            mask-size: contain;
            mask-position: center;
            mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg fill="%23000000" width="800px" height="800px" viewBox="-3.5 0 19 19" xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg"><path d="M4.63 15.638a1.028 1.028 0 0 1-.79-.37L.36 11.09a1.03 1.03 0 1 1 1.58-1.316l2.535 3.043L9.958 3.32a1.029 1.029 0 0 1 1.783 1.03L5.52 15.122a1.03 1.03 0 0 1-.803.511.89.89 0 0 1-.088.004z"/></svg>');
        }
        &.is-enabled::after {
            opacity: 1;
        }
    }
}

Demo:

Markdown	Renders to
`INPUT[toggle(class(checkbox)):exampleToggle]` toggle stuff

[greenship24]

@Cube707 Many thanks- this is basically what I've been looking for.

One question- how do we color the background (instead of purple be green or blue, etc.)? I am not a CSS guru but afaict it would not under the .checkbox-container class as that colors the actual checkmark.

Tried using the dev tools to figure out what element needs modified there but drew a blank.

[Cube707]

@greenship24 it is the .checkbox-container class actually, you probably targeted the :after by accident, which is the chekmark.

like this:

.checkbox {
    .checkbox-container {
        aspect-ratio: 1;
		background-color: hotpink;
        width: unset;
        &::after {
            opacity: 0;
            transform: unset;
            left: 2px;
            mask-size: contain;
            mask-position: center;
            mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg fill="%23000000" width="800px" height="800px" viewBox="-3.5 0 19 19" xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg"><path d="M4.63 15.638a1.028 1.028 0 0 1-.79-.37L.36 11.09a1.03 1.03 0 1 1 1.58-1.316l2.535 3.043L9.958 3.32a1.029 1.029 0 0 1 1.783 1.03L5.52 15.122a1.03 1.03 0 0 1-.803.511.89.89 0 0 1-.088.004z"/></svg>');
        }
        &.is-enabled::after {
            opacity: 1;

        }
    }
}

[greenship24]

@Cube707 Actually I wanted to do it in the after. Basically just have it be transparent as it is before it's checked then color in the container. Unsure if that is possible.

If not, your solution is perfectly workable (just an easy way to differentiate two toggles that are by each other.)

[Cube707]

@greenship24 sorry for the misunderstanding. If you want the color to only be there when the box is checked, move the background color under the .is-enabled block. Like this:

.checkbox {
    .checkbox-container {
        aspect-ratio: 1;
        width: unset;
        &::after {
            opacity: 0;
            transform: unset;
            left: 2px;
            mask-size: contain;
            mask-position: center;
            mask-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg fill="%23000000" width="800px" height="800px" viewBox="-3.5 0 19 19" xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg"><path d="M4.63 15.638a1.028 1.028 0 0 1-.79-.37L.36 11.09a1.03 1.03 0 1 1 1.58-1.316l2.535 3.043L9.958 3.32a1.029 1.029 0 0 1 1.783 1.03L5.52 15.122a1.03 1.03 0 0 1-.803.511.89.89 0 0 1-.088.004z"/></svg>');
        }
        &.is-enabled {
			background-color: hotpink;
			&::after {
				opacity: 1;
			}
		}
    }
}

[greenship24]

@Cube707 Please- no need to apologize in the least. I thank you for taking the time to help me out here.

And thank you, that is perfect and exactly what I was looking for. I had put it under &.is-enabled::after and wondered why it wasn't working. I did not know you had to separate them further to make an &::after block as well. Looks like I have some stuff to read up on with CSS.

Thank you again for the help!