Checkbox group - Web Component
Browser support
Parameters
The Web component uses the <z-checkbox-group> 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 |
The events emitted from the component are:
| Name | Payload | Description |
|---|---|---|
onchange | boolean[] | Returns the new value of the "value" attribute |
label
The z-checkbox-group component accepts a label attribute to set the text label of the component.
value & checked
The z-checkbox-group component accepts a value attribute to set the value of the component. It also accepts a checked attribute to set the checked state of the component.
disabled
You can disable the z-checkbox-group component by adding the disabled attribute.
required
You can make the z-checkbox-group component required by adding the required attribute.
name
The z-checkbox-group component accepts a name attribute to set the name of the component.
invalid
You can set the z-checkbox-group component to an invalid state by adding the invalid attribute.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.4.2/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.2/@zurich/web-components/checkbox-group.js"></script>Code
html
<z-checkbox-group label="Checkbox group"
options='[{ "text": "Option A" },{ "text": "Option B" },{ "text": "Option C" },{ "text": "Option D", "disabled": "true" }]'></z-checkbox-group>