shadcn.io is not affiliated with official shadcn/ui
Maintenance Mode Switch Form Block for Solid
One switch for a status page's maintenance mode, with the saved state beside it, a sentence on what visitors see, and a save bar that counts the unsaved change and can discard it.
Installation
Overview
Turn one thing on or off and keep it honest with this switch form for Solid with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner. The first band is a single row: the setting's name and a sentence on what it does at the start, a Switch at the end with the word for its draft state (On or Off) and, under it, the saved state ("Saved: Off"). A line under the row says what visitors will see in the state you've chosen, and a band under that dates the last change. Flipping the switch changes only the draft, so the foot counts it ("1 change not saved yet: On.") and the Shine Button saves it, which also moves the saved word and the date; the outline Button beside it puts the saved state back. Both stay in place while there's nothing to do and answer when pressed. The switch is drawn in the foreground color, so Save is the only colored control. It's built from Switch, Button, Shine Button and Guides, with a CSS entrance only. For settings with one real decision in them, feature toggles, maintenance and pause switches and any setting you want saved on purpose.
FAQ
How do I change the setting and its wording?
Edit the copy in the row and visitorsLine, which holds the two sentences that describe the on and off states. START is what the account has stored when the page opens: its on value and the ISO day it last changed. Everything shown (the draft word, the saved word, the date and the count in the foot) is worked out from the draft and the saved state, so nothing is typed twice.
How does the save bar know something changed?
The block keeps two copies, the saved state and the draft the switch edits, and compares them. When they differ the foot says so in words; flip the switch twice and land back on the saved value and the foot goes quiet again. Save and Discard are always there, marked aria-disabled instead of disabled, so they keep their place and focus; pressing one with nothing to do says "No changes to save." or "Nothing to discard."
How does it work with a keyboard and a screen reader?
The switch is named "Maintenance mode" and Space flips it. The words beside it are decoration for sighted users, because the name and the state are already announced; the foot is a polite status region, so a change, a save and a discard are each spoken once. Focus never moves on its own.
How does it look on a phone?
The row stays on one line down to 320 px, with the switch and the saved word at the end and the sentences wrapping under them. The foot is pinned to the bottom of the screen with Save and Discard side by side.
What stays local, and how do I connect it for real?
Nothing is sent: Save says "Maintenance mode is on, in this demo." and the date it shows is a fixed one. To make it real, post the draft from the submit handler, set the saved state from the server's answer and show a failure in the status line, keeping the draft so nothing is lost.