Skip to content 
Boolean icon - CSS Component
The BooleanIcon component can be used imported from:
Playground
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.
Invalid
The input can be set as invalid using the aria-invalid in the input:
help-text
The input can have a help-text. This only work when label if provided:
Browser support
Detected engine:
Chromium
Webkit
Gecko