Home/Components/Input

Input

Single-line text entry. Used everywhere — sign-in, search, money fields, free text. The page also covers the .field wrapper that pairs label, helper, and error around any input.

Stable .input 4 sizesMono-friendly

Usage

Inputs accept text. They are 36 px tall by default and use the border, not a shadow, as their resting cue.

Default.input

States

Rest

Focus

Disabled

[disabled]

Invalid

aria-invalid

With field

Wrap with .field for label + help; switch help for error inline.

BranchWhere this receipt was rung up

With helper

.field-help

Amount dueAmount must be greater than zero

With error

.field-error

Sizes

Default is 36 px. Use 30 px inside dense toolbars; 44 px for mobile portals.

Sizes.input + height

Kinds

Specialised variants: textarea, search-with-leading-icon, money input with mono.

Textarea

.textarea

With leading icon

icon-l

Money input

mono + tabular-nums

Parts

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

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.

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>