Toggles

Switches and checkboxes for binary choices and settings.

Switch Toggle

Toggle Switches

Auto-enrich new accounts

Automatically run data enrichment on incoming accounts

Email notifications

Send email alerts for deal status changes

Ghost Rep mode

Requires Enterprise plan

HTML

<div class="monarch-toggle-row">
  <div>
    <div class="monarch-toggle-row__label">Auto-enrich</div>
    <div class="monarch-toggle-row__description">Enrich new accounts</div>
  </div>
  <div class="monarch-toggle monarch-toggle--active">
    <span class="monarch-toggle__thumb"></span>
  </div>
</div>

Checkboxes

Styled Checkboxes

Intelligence Agent

Engagement Agent

Revenue Agent

Success Agent

HTML

<label class="monarch-checkbox">
  <div class="monarch-checkbox__box monarch-checkbox__box--checked">
    <svg>✓</svg>
  </div>
  <span class="monarch-checkbox__label">Intelligence Agent</span>
</label>

Interactive Toggle

Click to Toggle

Click to toggle

Usage Guidelines

• Use toggles for immediate on/off settings — no save button needed

• Use checkboxes for multi-select lists where choices are submitted together

• Active state uses brand indigo — instantly recognizable

• Include a label and description next to toggles for clarity

• Disabled toggles show 50% opacity with a reason