React Setpoint Control

Copy Page

A slider is fine for volume. It is the wrong control for a reactor temperature, where a fat-fingered drag is a safety event. This is numeric entry that clamps to limits, requires an explicit confirm, and then ramps the process value toward the target the way a real controller does.

Installation

Props

Why the extra steps are the point

Every friction in this control is deliberate, because the failure mode it guards against is a wrong value sent to real equipment:

• Clamping happens on entry, not on submit — you cannot even type your way past a limit into a confirmable state.
• Apply is two-stage. The first press arms a confirm; the confirm button is styled as destructive because committing a setpoint to a live process is a consequential act. A slider offers no such moment.
• The value ramps. On confirm, the displayed process value eases toward the target over a time proportional to the distance and rampRate, mirroring how the real loop will move — an operator watching a step jump would rightly distrust the display.

Pair it with an Interlock Chain: pass disabled when a permissive isn't met, and put the failing condition in disabledReason, as the second card in the demo shows. The control should be dead until it is safe to move.