HTML elements¶
Progress bar¶
Nextcloud support and provides an already themed progress bar.
Please use the html5 progress
element.

<progress value="42.79" max="100"></progress>
Checkboxes and radios¶
As default html5 checkboxes & radios are not customizable, we created an override using label and ::after
elements.
There are 2 colors:
- Default themed with the primary color.
- White colored.
Requirements:
- You need to have a
label
element directly after theinput
element. - The input must have the
checkbox
orradio
class. - To use the white theme, you need to also add the
checkbox--white
orradio--white
class. - Your label must have an associated text for accessibility.

<input type="checkbox" id="test1" class="checkbox"
checked="checked">
<label for="test1">Selected</label><br>
<input type="checkbox" id="test2" class="checkbox">
<label for="test2">Unselected</label><br>
<input type="checkbox" id="test3" class="checkbox"
disabled="disabled">
<label for="test3">Disabled</label><br>
<input type="checkbox" id="test4" class="checkbox">
<label for="test4">Hovered</label><br>

<input type="radio" id="test1" class="radio"
checked="checked">
<label for="test1">Selected</label><br>
<input type="radio" id="test2" class="radio">
<label for="test2">Unselected</label><br>
<input type="radio" id="test3" class="radio"
disabled="disabled">
<label for="test3">Disabled</label><br>
<input type="radio" id="test4" class="radio">
<label for="test4">Hovered</label><br>