Skip to content

Boolean icon - CSS Component

The BooleanIcon component can be used imported from:

Playground

Construction

Common API

For the basics, check the common specifications.

The CSS component uses a <input type="checkbox"> tag. Setting the z-boolean-icon parameter with the corresponding icon of choice will render the Boolean Icon CSS component.

z-boolean-icon

The z-boolean-icon parameter requires the name of the icon to be used as the icon of the checkbox. Possible icons are:

star, heart, bookmark, like, dislike, lock, unlock, mute, unmute, sound-on, sound-off, visible or invisible.

disabled

The attribute disabled in the <input type="checkbox"> tag will block the interaction with the component.

And with label:

required

The attribute required in the <input type="checkbox"> tag will set the component as required.

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:

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example