shadcn.io is not affiliated with official shadcn/ui
Two-Step Verification Switch With Description Form Block for React Aria
A two-step verification switch that explains both states in cells under the row, When this is on and When this is off, marks the cell that applies, and shows a Set up an authenticator button only when it is on.
Installation
Overview
Say what a switch does in both directions with this described switch form for React with React Aria. A compact header sits over a hairline frame with a plus mark on each corner. The first row names "Two-step verification" and holds its Switch with the word On or Off. Under it two cells share one hairline: "When this is on" (a code from an authenticator app after your password, sessions that end after 8 hours) and "When this is off" (the password alone, sessions that last 30 days). The cell that matches the switch is marked: a foreground ring, aria-current and a "Now" badge; the other is muted. Turning it on also shows a "Set up an authenticator" button, kept in a reserved row so nothing moves; it only says that nothing opens in this demo. The foot counts the unsaved change beside a Shine Button to save it and an outline Button to discard it. It's built from Switch, Badge, Button, Shine Button and Guides, with a CSS entrance only. For security settings, privacy toggles and any switch where people ask "and what if I turn it off?".
FAQ
How do I change what each state says?
Edit STATES: each has a title and two typed lines. The cell for the draft state is the one whose id matches the switch, so the marked cell follows the switch immediately, before anything is saved.
How is the current cell marked for assistive technology?
It gets aria-current="true", and the "Now" badge is visible text in that cell; the other cell hides its badge but keeps its space. Colour is never the only signal: the ring, the badge and the muted text all change.
What does Set up an authenticator do?
In this demo it only writes "Nothing opens in this demo. Your app would pair here." in the status line. Its row is always present and is invisible and inert while the switch is off, so turning the switch on never pushes the cells down. In your app, open your pairing flow from the handler.
How does it look on a phone?
The row stays as it is and the two cells stack, the marked one with its ring. The foot is pinned to the bottom of the screen so Save is always reachable.