Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form blocks

Pro

Pause All Switch Group Form Block for Vue

A master switch that pauses the alerts of four smart-home devices while keeping each one's own setting, with the smoke alarm exempt, a figure of alerts still active and a save bar.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Mute a whole group without losing its settings with this switch group form for Vue with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner. A master cell holds a Switch named "Pause alerts from the hub" and a figure of how many of the four alerts are active ("3 of 4"); beside it, on a phone above it, a list of four devices (a doorbell, a motion sensor, a smoke alarm and a leak sensor) each has its own switch. Turn the master on and the doorbell, motion and leak rows say "Paused" and become inert, but keep their settings; turn it off and they come back as they were. The smoke alarm is the exception: safety alerts cannot be paused, so its row shows a lock and "Always on" and stays live, and the figure says that only smoke is active. The foot counts unsaved changes beside a Shine Button to save them and an outline Button to discard them. It's built from Switch, Button, Shine Button and Guides, with a CSS entrance only. For smart-home and device settings, notification groups, do-not-disturb and any list that needs a pause-all.

FAQ

How do I change the devices?

Edit DEVICES: each has an id, a name, a hint and a locked flag for a device that can't be paused. START holds which of the others are on and whether the hub is paused. The figure counts the locked devices always and the others only when they are on and the hub isn't paused; the changes in the foot are worked out from the saved and draft setups.

What happens to a device while the hub is paused?

Its row says "Paused" and its switch is inert, so it can't be reached with the pointer or the keyboard, but it still shows the state it will return to. Nothing is overwritten: turn the master off and each device is exactly as it was. Because the paused state is part of what Save keeps, you can save a pause and the devices' own settings together.

Why can't the smoke alarm be paused or turned off here?

It is a safety alert, so the block treats it as always on: no switch, a lock and "Always on", and a sentence in its row. If your product lets people turn a safety alert off, give it a switch like the others and keep it out of the pause by leaving the locked flag on.

How does it look on a phone?

The master cell comes first, full width, with the figure under the switch; the device list follows it with each row's sentence under its name, and the foot is pinned to the bottom of the screen. From the medium breakpoint the master sits in a column at the start with a line between the two.

What stays local, and how do I connect it for real?

Nothing is sent: Save says "Saved 2 changes in this demo." To make it real, send the paused flag and the devices that are on from the submit handler, update the saved setup from the answer and show a failure in the status line without losing the draft.

How do I connect it to react-hook-form or TanStack Form?

react-hook-form is a React library; use TanStack Form's adapter for your framework, subscribe to the paused field to decide which rows are inert and keep the devices' values in the form.
All 100 form blocks