Use switch for settings that take effect immediately.

Usage

<label class="of-switch">
  <input type="checkbox" class="of-switch__input" />
  <span class="of-switch__track"><span class="of-switch__thumb"></span></span>
  <span class="of-switch__label">Enable reminders</span>
</label>

Example

Accessibility

• Expose state with the native checkbox semantics.
• Keep label text explicit about what turns on/off.