Search Input
Leading-icon text input used for client-side filtering. 'Filter by rule name or labels', 'Filter by endpoint or labels', 'Filter by flag name or value'.
DO
Write the placeholder as an instruction: 'Filter by <entity> or labels'.
DON'T
Ship two unlabeled search inputs on the same page — a user cannot tell which one filters what.
Design
default
⌕Filter by labels
Search-icon affix, placeholder text.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<Input leftSection={<IconSearch />} placeholder="Filter by labels" />Layout
| Property | Value |
|---|---|
| height | 36px control-height |
| padding | 0 12px 0 34px |
| border-radius | 4px sm |
Accessibility
| ARIA | Mirror the placeholder as aria-label or use a visible <label>. |