Checkbox select - Web Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Parameters

The Web component uses the <z-checkbox-select> tag:

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

Name	Type	Description	Slot
options	object[]	List of options
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	string[]	Returns the new value of the "value" attribute
onrestarted	void	Emitted on value reset

options

The z-checkbox-select component accepts an options attribute to set the options of the component. The options attribute should be an array of objects with the following properties:

• text (string): The text label of the checkbox.
• value (string): The value of the checkbox.
• disabled (boolean): Whether the checkbox is disabled.

label

The z-checkbox-select component accepts a label attribute to set the text label of the component.

value

The z-checkbox-select component accepts a value attribute to set the value of the component. The value attribute should be an array of booleans, matching the number of options.

disabled

You can disable the z-checkbox-select component by adding the disabled attribute.

required

You can make the z-checkbox-select component required by adding the required attribute.

name

The z-checkbox-select component accepts a name attribute to set the name of the component.

invalid

You can set the z-checkbox-select component to an invalid state by adding the invalid attribute.

TIP

The difference between the CheckboxSelect and the CheckboxGroup components is that, in the CheckboxSelect component, returns an array of values, while the CheckboxGroup component returns an array of booleans.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.2/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.2/@zurich/web-components/checkbox-group.js"></script>

Code

<z-checkbox-group label="Checkbox group"
  options='[{ "text": "Option A" },{ "text": "Option B" },{ "text": "Option C" },{ "text": "Option D", "disabled": "true" }]'></z-checkbox-group>