Selection Controls

Name: Rence Material
Author: david abalaku

Selection controls allow users to make choices such as selecting options, or switching settings on or off.

User Preferences!

Checkboxes

Multi-selection

Checked

Unchecked

Rence Material automatically tints checkboxes with the primary brand color when active.

Native Overrides!

HTML

<!-- Checkbox -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" checked>
  <label class="form-check-label" for="check1">Checked</label>
</div>

Switches

Binary Toggles

Enable Notifications

Dark Mode

Use .form-switch on .form-check for modern Material 3 toggles.

Fluid animations!

HTML

<!-- Toggle switch -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switch1" checked>
  <label class="form-check-label" for="switch1">On</label>
</div>