Checkbox - CSS Component โ
...
Browser support โ
Construction โ
Common API
For the basics, check the common specifications.
The CSS component uses the <label>
tag or <input>
depending if you want to insert a describing set for the input.
z-checkbox
โ
The z-checkbox
parameter is the main parameter used to render the checkbox component.
Indeterminate โ
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.
If the javascript scripts are used, then the data-indeterminate
attribute can also be used.
Playground โ
Customization โ
HTML Examples โ
Imports
html
<script type="module" src="/0.4.3/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@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.4.3/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/Checkbox.css" />
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.4.3/examples/styles.css" />
<script type="module" src="/0.4.3/examples/params-script.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th rowspan="2" colspan="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 rowspan="3">shaped</th>
<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>
<tr>
<th rowspan="3">outlined</th>
<th>-</th>
<td>
<div>
<input z-checkbox="outlined" type="checkbox" />
</div>
</td>
<td>
<div>
<input z-checkbox="outlined" type="checkbox" checked />
</div>
</td>
<td>
<div>
<input z-checkbox="outlined" type="checkbox" checked data-indeterminate />
</div>
</td>
<td>
<div>
<label z-checkbox="outlined">
<span>Checkbox</span>
<input type="checkbox" />
</label>
</div>
</td>
<td>
<div>
<label z-checkbox="outlined">
<span>Checkbox</span>
<input type="checkbox" checked />
</label>
</div>
</td>
<td>
<div>
<label z-checkbox="outlined">
<span>Checkbox</span>
<input type="checkbox" checked data-indeterminate />
</label>
</div>
</td>
</tr>
<tr>
<th>disabled</th>
<td>
<div>
<input z-checkbox="outlined" type="checkbox" disabled />
</div>
</td>
<td>
<div>
<input z-checkbox="outlined" type="checkbox" disabled checked />
</div>
</td>
<td>
<div>
<input z-checkbox="outlined" type="checkbox" disabled checked data-indeterminate />
</div>
</td>
<td>
<div>
<label z-checkbox="outlined">
<span>Checkbox</span>
<input type="checkbox" disabled />
</label>
</div>
</td>
<td>
<div>
<label z-checkbox="outlined">
<span>Checkbox</span>
<input type="checkbox" disabled checked />
</label>
</div>
</td>
<td>
<div>
<label z-checkbox="outlined">
<span>Checkbox</span>
<input type="checkbox" disabled checked data-indeterminate />
</label>
</div>
</td>
</tr>
<tr>
<th>invalid</th>
<td>
<div>
<input z-checkbox="outlined" type="checkbox" data-invalid />
</div>
</td>
<td>
<div>
<input z-checkbox="outlined" type="checkbox" data-invalid checked />
</div>
</td>
<td>
<div>
<input z-checkbox="outlined" type="checkbox" data-invalid checked data-indeterminate />
</div>
</td>
<td>
<div>
<label z-checkbox="outlined">
<span>Checkbox</span>
<small>Invalid input</small>
<input type="checkbox" data-invalid />
</label>
</div>
</td>
<td>
<div>
<label z-checkbox="outlined">
<span>Checkbox</span>
<small>Invalid input</small>
<input type="checkbox" data-invalid checked />
</label>
</div>
</td>
<td>
<div>
<label z-checkbox="outlined">
<span>Checkbox</span>
<small>Invalid input</small>
<input type="checkbox" data-invalid checked data-indeterminate />
</label>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>