Pending
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initTogglePending(el) on the mounted element instead.
HTML
CSS
JavaScript
Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Install with shadcn
Needs a free account token. Get a token
npx shadcn@latest add @movin/toggle-pendingAbout this component
A switch that saves to a server: the thumb moves at once and a spinner runs inside it until the save lands, then it ticks. If the save fails, the thumb shakes and slides back, and the line under the label says so.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers2
- Click
- State change
Techniques4
- State machine
- Keyframes
- CSS transition
- SVG stroke
Accessibility
Keyboard and screen readers
A native checkbox with role="switch" inside a <label>, so Space toggles it and the visible text names it; :focus-visible on the input outlines the track, which is aria-hidden. The status line sits outside the label (so it is not part of the name), is linked with aria-describedby and is a polite live region, so "Saved" or the failure is announced.
Reduced motion
The thumb jumps and the shake is dropped.
Use it in anything you build, commercial and client work included. Licence