Boolean icon - CSS Component
Playground
Customization
Construction
Common API
For the basics, check the common specifications.
The CSS component uses a <input type="checkbox"> tag. Setting to default the parameter z-boolean-icon with the corresponding icon of choice will render the Boolean Icon CSS component.
z-boolean-icon
The z-boolean-icon parameter requires the name of the icon to be used as the icon of the checkbox. Possible icons are:
star, heart, bookmark, like, dislike, lock, unlock, mute, unmute, sound-on, sound-off, visible or invisible.
The color of the icon can be customized using the --z-boolean-icon--color CSS custom property, and --z-boolean-icon--color--off for the outline of the off state. Also the size of the icon using the --z-boolean-icon--size CSS custom property.
disabled
The attribute disabled in the <input type="checkbox"> tag will block the interaction with the component.
And with label:
required
The attribute required in the <input type="checkbox"> tag will set the component as required.
Browser support
Detected engine:
Chromium
Webkit
Gecko