HTML elements

Progress bar

Nextcloud support and provides an already themed progress bar.

Please use the html5 progress element.

Progress html5

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

  1. <input type="checkbox" id="test1" class="checkbox"
  2.        checked="checked">
  3. <label for="test1">Selected</label><br>
  4. <input type="checkbox" id="test2" class="checkbox">
  5. <label for="test2">Unselected</label><br>
  6. <input type="checkbox" id="test3" class="checkbox"
  7.        disabled="disabled">
  8. <label for="test3">Disabled</label><br>
  9. <input type="checkbox" id="test4" class="checkbox">
  10. <label for="test4">Hovered</label><br>

Nextcloud's themed radios

  1. <input type="radio" id="test1" class="radio"
  2.        checked="checked">
  3. <label for="test1">Selected</label><br>
  4. <input type="radio" id="test2" class="radio">
  5. <label for="test2">Unselected</label><br>
  6. <input type="radio" id="test3" class="radio"
  7.        disabled="disabled">
  8. <label for="test3">Disabled</label><br>
  9. <input type="radio" id="test4" class="radio">
  10. <label for="test4">Hovered</label><br>

Buttons