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 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.

Playground

Customization

HTML Examples

Imports

<script type="module" src="/0.4.0/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.0/@zurich/css-components/BooleanIcon.css" />

Code

<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>