CSS components ​

Boolean inputs ​

...

The available CSS boolean inputs are:

Basics of boolean inputs ​

The base element of a boolean input is a <input type="checkbox"/> HTML tag with the corresponding HTML attribute for the component (always stating with z-, ex.: z-checkbox).

They always have the option of being checked:

Label ​

In case you need to set a label for the boolean input, the base <input type="checkbox"/> HTML tag is wrapped by a <label> tag and the component HTML tag goes then in this tag, and with a <span> elements as previous sibling that will contain the actual label.

Boolean inputs validation ​

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 aria-invalid attribute if you are using the scripts:

We can also add a custom help-text:

Inputs ​

The available CSS inputs are:

Basics of inputs ​

The base elements of a input field are a <input /> or <textarea /> HTML tag with the corresponding type attribute, wrapped by a <label> tag with the corresponding HTML attribute to define the component (always stating with z-, ex.: z-text-input), and with a <span> elements as previous sibling that will contain the actual label.

There are two styling modifiers for each input. There is the line version, which is the default one. And also the shaped version. To specify the desired styling we will set it as a value for the main attribute, if the value it's omitted the field input will take the line styling. (ex: z-text-input="shaped")

Help text ​

...

Inputs validation ​

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 aria-invalid attribute if you are using the scripts:

max-length ​

TheText input and Textarea components allow the use of max-length attribute.