Section 09 · Components
Inputs & forms.
Inputs are where users do real work. Treat them with care: monospace where the content is structural, generous height, no surprises.
Anatomy
URL · monospace · supports
{{var}} interpolationlabel12.5px/Geist 500 · fg-dim · 6px below
field height38px (md) · 32px (sm) · 44px (lg)
background--vp-color-bg-2 (one tier lighter than canvas)
border1px line-2 · radius 6 · neon on focus
fontGeist body · Geist Mono for URL/header/body/regex/JSON
help11.5px fg-mute · below field · 6px gap
States
Must start with http:// or https://
When monospace, when not
Geist MonoURLs · headers · body payloads · regex · JSON · LDAP DNs · auth tokens
Geist (body)probe name · description · folder name · email subject · search
If the user is going to inspect or paste structural data, the field is monospace. If they're typing a label for themselves, it's body. Splitting this is a major reason VirtuProbe doesn't feel like a generic IDE.
Composed: key-value rows
The headers/query/form table on every probe surface. Three columns: enabled · key · value, plus a remove affordance on hover.
- The empty trailing row is permanent — typing into it adds a new row beneath. No "+ Add header" button.
- Checkbox tints to neon when checked.
- Borders only between rows and between key/value cells. No outer border — the row sits on the panel.
Don't
- Don't use placeholder as a label. Placeholders disappear; labels stay.
- Don't put a help string above the field. Below — eye lands on the field, then explanation if needed.
- Don't pad fields under 32px tall. 32 is the dense floor; 38 is default. Anything tighter and pointer accuracy collapses.