React Mode Selector

Mode is the most consequential control on a machine screen — it changes what the equipment will do on its own. So it is deliberately not a one-click affair: guarded switches state their consequences and ask again, and a mode you can’t safely enter right now is shown disabled with the reason, not hidden.

Operating mode

Currently in Auto. Recipe sequencing runs unattended.

Manual asks you to confirm its consequences. Maintenance is interlocked here — a wafer is in the chamber — so it can’t be selected until the tool is unloaded.

Installation

npx shadcn@latest add "https://kelvinui.com/registry/mode-selector.json"

Props

Prop	Type	Description
modes	Mode[]	{ id, label, description, tone?, confirm?, interlock? }
value	string	The active mode id
onChange	(id) => void	Fires only after any guard is satisfied

Guard, don't just switch

A mode with a confirm list doesn't change on click — it opens a guard that spells out exactly what will happen ("automatic sequencing will stop", "selected interlocks are bypassed for service") and requires a second, deliberate confirmation. The confirm button carries the mode's tone, so acknowledging entry to Maintenance is visibly a red action, not a neutral one. onChange fires only once the guard is satisfied, so the state you wire it to can trust that the operator meant it.

An interlock is a locked door with a sign

interlock marks a mode that cannot be entered in the current machine state — a wafer in the chamber, a door open, a fault latched. The option renders disabled, with a padlock and the specific reason ("wafer present — unload first"), rather than vanishing. A missing button reads as a bug and sends the operator looking for a workaround; a disabled button with a reason tells them exactly what to do to open the path. Enforce the same interlock in your control layer — the UI state is a courtesy, not the safety system.