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.2/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.2/@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.2/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/Checkbox.css" />
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.4.2/examples/styles.css" />
<script type="module" src="/0.4.2/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>