Confirm Switch
A switch that moves right away and can be flipped back during the undo window.
// Nothing has run yet
npx shadcn@latest add @sureui/confirm-switch
import { ConfirmSwitch } from "@/components/ui/sureui/confirm-switch"<ConfirmSwitch onConfirm={setPublic} />The switch moves as soon as it's flipped, and a small timer in its thumb empties while the undo window runs. Flipping it again during the window puts it back and calls onCancel. When the window ends, onConfirm runs with the new value and onCheckedChange follows.
If onConfirm returns a promise, the switch stays pending until it settles. If it fails, the switch goes back.
One direction
confirmWhen="off" only gives turning off an undo window. Turning on runs onConfirm right away. confirmWhen="on" does the opposite.
// Nothing has run yet
Ring
undoIndicator="ring" draws the timer as a ring around the switch instead of in the thumb.
// Nothing has run yet
ConfirmSwitch
Extends the shadcn Switch. The table lists the props it adds or changes.
| Prop | Type | Default |
|---|---|---|
| onConfirm | (checked: boolean) => void | Promise<unknown> | required |
| onCancel | () => void | — |
| onConfirmError | (error: unknown) => void | — |
| onCheckedChange | (checked: boolean) => void | — |
| confirmWhen | "on" | "off" | "both" | "both" |
| undoIndicator | "thumb" | "ring" | "thumb" |
| undo | boolean | number | "manual" | true |
| pauseUndoOnHover | boolean | true |
| pauseUndoOnFocus | boolean | true |
| announcements | { undo?, error? } | — |
onCheckedChange runs only once a change is confirmed, not when the switch first moves.
- It's a native
buttonwith theswitchrole, so Space and Enter flip it. aria-checkedfollows the switch's position, including during the undo window.- The undo window and a failure are announced in a polite live region. Change the text with
announcements.
WCAG
- 2.2.1 Timing Adjustable:
undo="manual"meets it, since Undo has no time limit. A numericundostops at 60 seconds.