Checkbox - CSS Component

...

Browser support

Detected engine:

Chromium
Webkit
Gecko

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.

Checkbox label

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.

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.5.1/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.5.1/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.1/@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.5.1/@zurich/css-components/javascript.js"></script>
    <link rel="stylesheet" href="/0.5.1/@zurich/css-components/base.css" />
    <link rel="stylesheet" href="/0.5.1/@zurich/css-components/Checkbox.css" />
    <!-- #endregion imports -->

    <link rel="stylesheet" href="/0.5.1/examples/styles.css" />
    <script type="module" src="/0.5.1/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"></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>
      </tbody>
    </table>
  </body>

</html>

Checkbox - CSS Component ​

Browser support ​

Construction ​

z-checkbox ​

Indeterminate ​

Playground ​

Customization ​

HTML Examples ​