School of Gains · Presented by PaperGains

Input & forms

Inputs, selects, textareas, checkboxes, radios and switches. Dark surface, 12px corners, green focus ring.

text field

Your email We'll email you a 6-digit code. No passwords, ever.

View HTML

<div class="sog-field" style="max-width:380px">
  <label class="sog-label" for="em">Your email</label>
  <input class="sog-input" id="em" type="email" placeholder="you@example.com"/>
  <span class="sog-help">We'll email you a 6-digit code. No passwords, ever.</span>
</div>

error

Your email Enter a valid email address.

View HTML

<div class="sog-field" style="max-width:380px">
  <label class="sog-label" for="em2">Your email</label>
  <input class="sog-input is-error" id="em2" value="jason@" />
  <span class="sog-help sog-help--error">Enter a valid email address.</span>
</div>

select & textarea

Experience level

What do you want to learn?

View HTML

<div style="display:grid;gap:16px;max-width:380px">
  <div class="sog-field"><label class="sog-label">Experience level</label>
  <select class="sog-select"><option>New to trading</option><option>Some experience</option><option>Advanced</option></select></div>
  <div class="sog-field"><label class="sog-label">What do you want to learn?</label><textarea class="sog-textarea" placeholder="Options, swing trading, risk management…"></textarea></div>
</div>

input group

View HTML

<div class="sog-input-group" style="max-width:460px"><input class="sog-input" placeholder="you@example.com"/><button class="sog-btn sog-btn--primary">Subscribe</button></div>

checkbox, radio, switch

Send me the weekly brief Monthly Yearly SMS alerts

View HTML

<label class="sog-check"><input type="checkbox" checked/> Send me the weekly brief</label>
<label class="sog-check"><input type="radio" name="r" checked/> Monthly</label>
<label class="sog-check"><input type="radio" name="r"/> Yearly</label>
<label class="sog-check"><input type="checkbox" class="sog-switch" checked/> SMS alerts</label>