Switch
Takes effect the moment it moves. If the change needs a review step, it is not a switch.
Overview
A switch is the only control in this set that does something on contact. That is its definition and its entire hazard: it looks like a Checkbox, sits in the same forms, and commits where a checkbox stages.
Which of the three to reach for — how many may be chosen, and when the choice takes effect — is decided on Selection controls.
What may sit on a switch
A switch carries a view setting, never a clinical fact. Anything that is recorded, signed, or acted on by somebody else needs a moment at which a person reviews it — and a switch has no such moment.
- The label says what will happen now, not what will be saved later. “Show model annotation” is a switch; “Patient consents to data sharing” is a record entry wearing one.
effecthas one permitted value. The prop exists so that a deferred switch cannot be declared — the constraint is in the type, and there is no runtime check to forget.- Nothing destructive and nothing irreversible. A control that acts on contact cannot also ask “are you sure”; if the answer matters that much, it is a Dialog behind a Button.
- It reports as a switch, not as a checkbox, so a screen-reader user hears on/off rather than checked — which is the difference the sighted reader gets from the shape.
What the component enforces, and what it only asks for
The type carries the one constraint that matters, and it carries it by having exactly one permitted value.
| Rule | Held by | How |
|---|---|---|
| A deferred switch cannot be declared | The component | effect accepts "immediate" and nothing else. The constraint is in the type; there is no runtime check to forget.Asserted: Switch: effect has exactly one permitted value |
| It reports as a switch, not a checkbox | The component | role="switch" on a real input, so it is announced as on or off.Asserted: AX tree: the switch toggles its checked state, and stays a switch |
| The whole label row is the target | The component | 44 px, from the shared base file — a control that acts on contact is the worst one to make small. Asserted: Switch: the label row is the target, not the control |
| Its state is shown in words | The component | “On” or “Off” beside the label. The switch drew the same square as a checkbox, and the two are opposites in this system — one stages a change, one applies it. Driven in a browser. Asserted: Switch: its state is shown in words, and follows the switch |
| An unavailable switch says why, and stays reachable | The component | disabled is not a prop, as on Button. unavailable={{ reason }} keeps the control focusable, describes it by the reason, and ignores Space and clicks. It accepted a bare native disabled: off, unreachable by keyboard, and silent about why.Asserted: Checkbox, radio and switch cannot be switched off without a reason |
| What sits on it is a view setting, not a clinical fact | You | label is a string. “Patient consents to data sharing” on a switch is a record entry with no moment at which anybody reviews it, and the type permits it. |
| Nothing destructive or irreversible | You | onChange is yours. A control that acts on contact cannot also ask whether you are sure. |
| The change really is immediate | You | If your handler defers, the label is now lying and the component cannot tell. |
A rule stated on a component page reads as a rule the component keeps. 3 of these 6 are; 3 are obligations this page was quietly handing to the reader. The component makes the wrong kind of switch unexpressible. It cannot stop the wrong content being put on a correct one.
Do's and don'ts
A view setting that genuinely takes effect at once, and says so.
A recorded clinical fact on an immediate-effect control, pre-set to yes. There is no moment at which anyone reviews it.
Show model annotation off
applies now
A view setting. It changes what the reader sees and nothing in the record, and the label says it takes effect at once.
Patient consents to data sharing on
A recorded clinical fact on a control that acts on contact. There is no moment at which anyone reviews it, and it is already true.
Night mode on
Reversible, immediate, harmless to get wrong. Exactly what a switch is for.
Accessibility
role="switch"on a real checkbox input, so it is announced as on or off and still gets the platform's keyboard handling.- State is never carried by knob position alone. Position plus the label's own wording, so it survives greyscale and a low-contrast cart display.
- The whole label row is the target, and it is at least 44 px — a control that acts on contact is the worst one to make small.
- The hint is referenced by
aria-describedby, and says when the change takes effect if that is not obvious from the label.
Outcomes of use
- Effectiveness — the clinician knows the change has already happened, because the control said so before they touched it.
- Efficiency — no submit step for a setting that has no reason to have one.
- Satisfaction — immediate feedback on a view they are adjusting while reading. Attributes believed to contribute to an outcome; the outcome is settled by observing real use, not by this page — see Usability & context of use.
Clinical safety notes
Trace these in your risk file (ISO 14971) and usability engineering file (IEC 62366-1). Which of these the component keeps and which are yours is stated in the guarantees table; a control the component does not keep is one your risk file must show you keep.
- No clinical fact is recorded through a switch. (you) Mitigates: an entry in the permanent record that nobody reviewed, because there was no moment at which review could happen.
- Nothing destructive or irreversible. (you) Mitigates: an action taken on contact that cannot be undone.
- The label states the immediate effect. (you write it; the component requires effect to be immediate) Mitigates: a clinician staging a change that was in fact already applied.
Implementation
$ npx shadcn@latest add https://md.notjustany.tech/r/switch.json<Switch
label="Show model annotation"
effect="immediate" // the only permitted value
hint="Applies now" />
// A value that needs a review step is a Checkbox inside a form. The
// constraint is in the type; nothing throws at runtime.
Related
- Selection controls — which of the three to use.
- Checkbox — the same shape, staged instead of applied.
- Button — when the action needs a press and a label that names it.
- Interaction states — what a control owes the reader as it changes.