You are reading an outdated version of this documentation. Please check out the latest version of the developer manual.

Nextcloud Developer Manual

HTML elements¶

Progress bar¶

Nextcloud support and provides an already themed progress bar.

Please use the html5 progress element.

Progress html5

<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 the input element.
The input must have the checkbox or radio class.
To use the white theme, you need to also add the checkbox--white or radio--white class.
Your label must have an associated text for accessibility.

Nextcloud's themed checkboxes

<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>

Nextcloud's themed radios

<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>

Buttons¶

All documentation licensed under the Creative Commons Attribution 3.0 Unported license.

See who contributed to our documentation/credits.