Boolean icon

...

Browser support

...

Parameters

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.

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
z-boolean-icon	string?	Icon set to be used as a checkbox. The possible values are: star, heart, bookmark, like, dislike, lock, unlock, mute, unmute, sound-on, sound-off, visible, or invisible
label	string?	Label of the input
value	boolean?	Value of the model
checked	boolean?	Overrides the "value" parameter as in the standard
disabled	boolean?	Blocks the interaction with the input component.
required	boolean?	Marks the input component as required.
name	string?	Identification for the field inside the form

The events emitted from the component are:

Name	Payload	Description
onchange	boolean	Returns the new value of the "value" attribute

Invalid input

If you require to make the input invalid, use the native API of the input using setCustomValidity. If no message is provided, the input is set to valid.

// Make invalid
input.setCustomValidity('Error message');
input.checkValidity();

Or you can use the data-invalid attribute if you are using the scripts:

<input z-boolean-icon="star" type="checkbox" data-invalid />

Playground

Customization

HTML Examples

Imports

<script type="module" src="/0.3.6/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@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>