Input & field
Single-line text entry. Used everywhere — sign-in, search, money fields, free text. Built on top of a .field wrapper that pairs label, helper, and error.
Usage
Inputs accept text. They are 36 px tall by default and use the border, not a shadow, as their resting cue.
States
Rest
Focus
Disabled
Invalid
With field
Wrap with .field for label + help; switch help for error inline.
Where this receipt was rung up
With helper
Amount must be greater than zero
With error
Sizes
Default is 36 px. Use 30 px inside dense toolbars; 44 px for mobile portals.
Kinds
Specialised variants: textarea, search-with-leading-icon, money input with mono.
Textarea
With leading icon
$
Money input
Anatomy
| Property | Value | Notes |
|---|---|---|
| height | 36 px | 30 sm · 44 lg |
| padding | 0 12 px | — |
| radius | --button-radius (8 px) | — |
| border | 1 px solid --border-strong | Focus: brand + 3 px soft ring |
| font | 400 14 / 1.5 sans | Mono for money & IDs |
| placeholder | --text-subtle | Don't mimic the value |
Do & don't
Do
Label every input. Even a search field has an aria-label.
Don't
Use placeholder text as the label. It disappears the moment the user types.
Do
Set font-family: var(--font-mono) on numeric inputs.
Don't
Right-align text inputs; only numbers and money belong on the right.
Code
<!-- Field with helper --> <div class="field"> <label class="field-label">Branch</label> <input class="input" placeholder="Park Centre"> <span class="field-help">Where this receipt was rung up</span> </div>