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: |
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
.
ts
// Make invalid
input.setCustomValidity('Error message');
input.checkValidity();
Or you can use the data-invalid
attribute if you are using the scripts:
html
<input z-boolean-icon="star" type="checkbox" data-invalid />
Playground
Customization
HTML Examples
Imports
html
<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
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>