Checkbox - Web Component โ
Browser support โ
Parameters โ
The Web component uses the <z-checkbox>
tag:
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
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 |
indeterminate | boolean | Marks the component as indeterminate. |
The events emitted from the component are:
Name | Payload | Description |
---|---|---|
onchange | boolean | Returns the new value of the "value" attribute |
label
โ
The z-checkbox
component accepts a label
attribute to set the text label of the component.
value
& checked
โ
Both value
and checked
parameters are used to set the value of the component.
disabled
โ
The attribute disabled
will block the interaction with the component.
required
โ
The attribute required
will set the component as required.
name
โ
The name
attribute is used to set the name of the component. This is useful when the component is inside a form.
invalid-text
โ
The invalid-text
attribute will set the component as invalid. Without label, the text won't be present but the checkbox will still be invalid,
indeterminate
โ
The indeterminate
attribute it's used to set the checkbox in an indeterminate state.
Playground โ
Customization โ
HTML Examples โ
Imports
html
<link rel="stylesheet" href="/0.4.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.3/@zurich/web-components/checkbox.js"></script>
Code
html
<z-checkbox></z-checkbox>
<z-checkbox disabled></z-checkbox>
<z-checkbox invalid-text="Invalid input"></z-checkbox>
<z-checkbox checked></z-checkbox>
<z-checkbox checked disabled></z-checkbox>
<z-checkbox checked invalid-text="Invalid input"></z-checkbox>
<z-checkbox label="Checkbox"></z-checkbox>
<z-checkbox label="Checkbox" disabled></z-checkbox>
<z-checkbox label="Checkbox" invalid-text="Invalid input"></z-checkbox>
<z-checkbox label="Checkbox" checked></z-checkbox>
<z-checkbox label="Checkbox" checked disabled></z-checkbox>
<z-checkbox label="Checkbox" checked invalid-text="Invalid input"></z-checkbox>