Checkbox - CSS Component ​

The Checkbox component can be used imported from:

Playground ​

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.

Invalid ​

The input can be set as invalid using the aria-invalid in the input:

help-text ​

The input can have a help-text. This only work when label if provided:

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.

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​