Checkbox
...
Browser support
...
Parameters
The CSS component uses the <label>
tag or <input>
depending if you want to insert a describing set for the input.
INFO
The indeterminate
status of the Checkbox
in the CSS version must be achieved via JavaScript. This is done by explicitly changing the boolean value of the HTMLInputElement
instance.
ts
inputInstance.indeterminate = true;
Check all the information on how to do it in here.
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
z-checkbox | string? | ... |
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-checkbox 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/Checkbox.css" />
Code
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZDS | Checkbox CSS example</title>
<!-- #region imports -->
<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/Checkbox.css" />
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.3.6/examples/styles.css" />
<script type="module" src="/0.3.6/examples/params-script.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="3">No label</th>
<th colspan="3">With label</th>
</tr>
<tr>
<th>-</th>
<th>checked</th>
<th title="indeterminate">indet.</th>
<th>-</th>
<th>checked</th>
<th>indeterminate</th>
</tr>
</thead>
<tbody>
<tr>
<th>-</th>
<td>
<div>
<input z-checkbox type="checkbox" />
</div>
</td>
<td>
<div>
<input z-checkbox type="checkbox" checked />
</div>
</td>
<td>
<div>
<input z-checkbox type="checkbox" checked data-indeterminate />
</div>
</td>
<td>
<div>
<label z-checkbox>
<span>Checkbox</span>
<input type="checkbox" />
</label>
</div>
</td>
<td>
<div>
<label z-checkbox>
<span>Checkbox</span>
<input type="checkbox" checked />
</label>
</div>
</td>
<td>
<div>
<label z-checkbox>
<span>Checkbox</span>
<input type="checkbox" checked data-indeterminate />
</label>
</div>
</td>
</tr>
<tr>
<th>disabled</th>
<td>
<div>
<input z-checkbox type="checkbox" disabled />
</div>
</td>
<td>
<div>
<input z-checkbox type="checkbox" disabled checked />
</div>
</td>
<td>
<div>
<input z-checkbox type="checkbox" disabled checked data-indeterminate />
</div>
</td>
<td>
<div>
<label z-checkbox>
<span>Checkbox</span>
<input type="checkbox" disabled />
</label>
</div>
</td>
<td>
<div>
<label z-checkbox>
<span>Checkbox</span>
<input type="checkbox" disabled checked />
</label>
</div>
</td>
<td>
<div>
<label z-checkbox>
<span>Checkbox</span>
<input type="checkbox" disabled checked data-indeterminate />
</label>
</div>
</td>
</tr>
<tr>
<th>invalid</th>
<td>
<div>
<input z-checkbox type="checkbox" data-invalid />
</div>
</td>
<td>
<div>
<input z-checkbox type="checkbox" data-invalid checked />
</div>
</td>
<td>
<div>
<input z-checkbox type="checkbox" data-invalid checked data-indeterminate />
</div>
</td>
<td>
<div>
<label z-checkbox>
<span>Checkbox</span>
<small>Invalid input</small>
<input type="checkbox" data-invalid />
</label>
</div>
</td>
<td>
<div>
<label z-checkbox>
<span>Checkbox</span>
<small>Invalid input</small>
<input type="checkbox" data-invalid checked />
</label>
</div>
</td>
<td>
<div>
<label z-checkbox>
<span>Checkbox</span>
<small>Invalid input</small>
<input type="checkbox" data-invalid checked data-indeterminate />
</label>
</div>
</td>
</tr>
</tbody>
</table>
<script>
Array.from(document.querySelectorAll('*[data-indeterminate]'))
.forEach((node) => {
node.indeterminate = true;
});
</script>
</body>
</html>