Forms
Checkbox
A native <input type="checkbox"> with the pui-checkbox class.
<label>
<input type="checkbox" class="pui-checkbox" />
Accept the terms
</label>
Checked
<input type="checkbox" class="pui-checkbox" checked />
Colors
A color class paints the checked state, the same classes used everywhere else:
<input type="checkbox" class="pui-checkbox" checked />
<input type="checkbox" class="pui-checkbox pui-success" checked />
<input type="checkbox" class="pui-checkbox pui-error" checked />
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:
<input type="checkbox" class="pui-checkbox" indeterminate />
The property keeps working as usual:
input.indeterminate = true;
Disabled
<input type="checkbox" class="pui-checkbox" checked disabled />
With a label and a message
<label class="pui-field-group">
<span>Newsletter</span>
<input type="checkbox" class="pui-checkbox" aria-describedby="news-help" />
<small id="news-help">One email a month, no more.</small>
</label>