Text Input
Expression editor input on /query — CodeMirror-backed single-line field with leading options menu and trailing Execute slot.
DO
Use monospace for expression-like content so autocomplete and suggestions align to character columns.
DON'T
Hide the Execute action behind Enter only — keep the visible suffix button for discoverability.
Design
default
⋮up{job="demo"}Execute
Full-width, brand-blue focus ring, monospaced expression text.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<ExpressionInput value={expr} onExecute={run} />Layout
| Property | Value |
|---|---|
| height | 36px control-height |
| border-radius | 4px sm |
| focus-ring | brand-blue brand-blue |
Accessibility
| ARIA | Associate with <label>Expression</label> or aria-label. |
| Keyboard | Enter executes; Cmd/Ctrl+Enter also supported in CodeMirror. |