Forms

Checkbox

A native <input type="checkbox"> with the pui-checkbox class.

On this page

Checked

Colors

A color class paints the checked state, the same classes used everywhere else:

Without a color class it uses the theme color.

Indeterminate

The third state — neither checked nor unchecked — is normally a JavaScript property, which makes it impossible to express in markup. Perfect UI accepts it as an attribute:

It works on checkboxes rendered at any time, by a framework or a client-side route, with nothing to call. One exception: if your page turns animations off everywhere (* { animation: none !important }) or animates this checkbox itself, a checkbox rendered after the page loaded shows the mixed state from the reader's first click or focus on the page instead.

The property keeps working as usual:

input.indeterminate = true;

Disabled

With a label and a message