Range Hint Input
Input with a contextual plausibility range in the helper text that reacts adaptively to the value (success / warning / danger). Generic pattern for plausibility checks without hard validation — the user may deliberately enter values outside the range.
Live Preview
Try the three zones:
- Plausible: e.g. 12500 (within 12000–13500)
- Slightly off: e.g. 11800 (within the 15% tolerance)
- Unusual: e.g. 99 (far outside)
Features
- Adaptive helper-text color based on $derived status
- Tolerance factor for "slightly off" vs. "far outside"
- No blocking — the user can always enter values outside the range
- Explanatory hint on danger: "Typo? Meter replaced?"
- Reusable as a small wrapper without a new component
Code
RangeHintInput.svelte
Best Practices
expectedRange from real data
Last year's value ± 15%, or a trend extrapolation from the last 3 periods. Hardcoded ranges feel arbitrary — derived ranges signal to the user that the app understands them.
Tolerance factor per domain
15% is a sensible default. Stricter for required fields (5%), wider for estimates (30%). Never 0% — otherwise there is no "slightly off".
Status never blocks
The input stays validation-free — the user can deliberately enter values outside the
range (meter replacement, special case, settlement value). For hard constraints, set an error prop instead.
Explain the why on danger
For values far outside the range, offer an additional contextual hint — "Typo? Meter replaced? Special tariff?". That raises the correction rate without blocking the user.