Inputs — Monarch Design System

Text Input

Text Inputs

Account Name

Email

Company (required)

This field is required

Disabled

HTML

<label class="monarch-label">Account Name</label>
<input class="monarch-input" placeholder="Enter account name..." />

<label class="monarch-label monarch-label--error">Company (required)</label>
<input class="monarch-input monarch-input--error" />
<p class="monarch-helper monarch-helper--error">This field is required</p>

Search Input

Search

⌘K

HTML

<div class="monarch-search">
  <svg class="monarch-search__icon">...</svg>
  <input class="monarch-search__input" placeholder="Search..." />
  <kbd class="monarch-search__kbd">⌘K</kbd>
</div>

Select

Select Input

Account Segment

HTML

<select class="monarch-select">
  <option>All Segments</option>
</select>

Textarea

Deal Notes

Markdown supported

HTML

<textarea class="monarch-textarea" rows="4" placeholder="Notes..."></textarea>

Input with Prefix

Decorated Input

Deal Value

$

HTML

<div class="monarch-input-group">
  <span class="monarch-input-group__prefix">$</span>
  <input class="monarch-input" placeholder="0.00" />
</div>

Usage Guidelines

• Always include a visible label above the input

• Focus ring is indigo with 20% opacity — consistent brand reinforcement

• Error states use red border + helper text below the field

• ⌘K shortcut badge on search inputs signals keyboard-first design

• Disabled inputs use 60% opacity with base background