Skip to content
heyrav design system
ComponentsIn tools

Input

44px tall, hairline border, ink on focus. Label above, help or error below - never placeholder-as-label.

Used onTool rails
Shown on the case card.
Show code
<div class="field"><label for="in-1">Project name</label><input class="input" id="in-1" placeholder="ViewRyt"><span class="help">Shown on the case card.</span></div>

States

Enter a 10-digit phone number
Show code
<div class="field"><label for="in-2">Phone</label><input class="input" id="in-2" value="98290" aria-invalid="true" aria-describedby="in-2-e"><span class="error" id="in-2-e"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Enter a 10-digit phone number</span></div>
<div class="field"><label for="in-3">Disabled</label><input class="input" id="in-3" value="heyrav.in" disabled></div>

With icon and shortcut

/
Show code
<div class="input-group"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg><input class="input" placeholder="Search" aria-label="Search"><span class="kbd">/</span></div>

One-time code

Show code
<div class="otp" role="group" aria-label="Verification code"><input class="input" inputmode="numeric" maxlength="1" aria-label="Digit 1" value="4"><input class="input" inputmode="numeric" maxlength="1" aria-label="Digit 2" value="2"><input class="input" inputmode="numeric" maxlength="1" aria-label="Digit 3"><input class="input" inputmode="numeric" maxlength="1" aria-label="Digit 4"></div>

Accessibility

  • Every input has a visible <label>. Placeholders are examples, not labels.
  • Errors set aria-invalid and are linked with aria-describedby; the message says how to fix it.
  • Focus shows a 3px ink halo plus an ink border - visible without colour.