Boolean icon - CSS Component
Browser support
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 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
, 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.
Playground
Customization
HTML Examples
Imports
html
<script type="module" src="/0.3.7/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/BooleanIcon.css" />
Code
html
<div>
<input z-boolean-icon="star" type="checkbox" />
<input z-boolean-icon="star" type="checkbox" disabled />
<input z-boolean-icon="star" type="checkbox" data-invalid />
</div>
<div>
<input z-boolean-icon="star" type="checkbox" checked />
<input z-boolean-icon="star" type="checkbox" checked disabled />
<input z-boolean-icon="star" type="checkbox" checked data-invalid />
</div>
<div>
<label z-boolean-icon="star">
<span>Boolean icon</span>
<input type="checkbox" />
</label>
<label z-boolean-icon="star">
<span>Boolean icon</span>
<input type="checkbox" disabled />
</label>
<label z-boolean-icon="star">
<span>Boolean icon</span>
<small>Invalid input</small>
<input type="checkbox" data-invalid />
</label>
</div>
<div>
<label z-boolean-icon="star">
<span>Boolean icon</span>
<input type="checkbox" checked />
</label>
<label z-boolean-icon="star">
<span>Boolean icon</span>
<input type="checkbox" checked disabled />
</label>
<label z-boolean-icon="star">
<span>Boolean icon</span>
<small>Invalid input</small>
<input type="checkbox" checked data-invalid />
</label>
</div>