Boolean icon - Web Component
...
Browser support
Parameters
The Web component uses a <z-boolean-icon> tag.
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description |
|---|---|---|
config | string? | Icon set to be used as a checkbox. The possible values are: |
label(optional) | string | Label of the input |
value(optional) | boolean | Value of the model |
checked(optional) | boolean | Overrides the "value" parameter as in the standard |
disabled(optional) | boolean | Blocks the interaction with the input component. |
required(optional) | boolean | Marks the input component as required. |
name(optional) | string | Identification for the field inside the form |
invalid(optional) | boolean | The forced state for set the input as invalid |
The events emitted from the component are:
| Name | Payload | Description |
|---|---|---|
onchange | boolean | Returns the new value of the "value" attribute |
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/boolean-icon.js"></script>
<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />Code
html
<z-boolean-icon config="star"></z-boolean-icon>
<z-boolean-icon config="star" disabled></z-boolean-icon>
<z-boolean-icon config="star" invalid-text="Invalid input"></z-boolean-icon>
<z-boolean-icon config="star" checked></z-boolean-icon>
<z-boolean-icon config="star" checked disabled></z-boolean-icon>
<z-boolean-icon config="star" checked invalid-text="Invalid input"></z-boolean-icon>
<z-boolean-icon config="star" label="Boolean icon"></z-boolean-icon>
<z-boolean-icon config="star" label="Boolean icon" disabled></z-boolean-icon>
<z-boolean-icon config="star" label="Boolean icon" invalid-text="Invalid input"></z-boolean-icon>
<z-boolean-icon config="star" label="Boolean icon" checked></z-boolean-icon>
<z-boolean-icon config="star" label="Boolean icon" checked disabled></z-boolean-icon>
<z-boolean-icon config="star" label="Boolean icon" checked invalid-text="Invalid input"></z-boolean-icon>