shadcn.io is not affiliated with official shadcn/ui
Second-Step Preferences Account Block for Ark UI
Preferences for when an account asks for a second step: six actions each with a select (Always ask, Ask on new devices, Do not ask) and a line on what it means, a derived Strict, Balanced or Relaxed word, and a Save foot that counts unsaved changes.
Installation
Overview
Let people decide when their account asks for a second step with this preferences panel for React with Ark UI. A compact header holds the title and one sentence. Inside a hairline frame a band shows a word worked out from the choices, Strict, Balanced or Relaxed, with a sentence on what it means. Six rows follow: sign in on a new device, sign in on a trusted device, change your email, export your data, add a delegate and delete your account. Each has a native Select with Always ask, Ask on new devices and Do not ask, and one line on what the current choice means; deleting your account cannot be set to Do not ask and says why. The action foot holds a Shine Button Save, Discard and a status line that counts unsaved changes. It is built from Native Select, Badge, Button, Shine Button and Guides, with a CSS entrance only. For the security settings of any app with a second step.
FAQ
How do I change the actions?
Edit ACTIONS: each has an id, a title, the three lines of what each choice means (always, fresh and never), the choice it starts on and whether Do not ask is refused (locked). The panel word is worked out by scoring each choice: Always ask 0, new devices 1, Do not ask 2, then Strict up to 4, Balanced up to 8 and Relaxed above.
Why can delete not be set to Do not ask?
Deleting an account is irreversible, so the option is shown but unavailable and the row says so in words. The same pattern works for any action your product must always confirm: set locked and the option is disabled.
How do Save and Discard behave?
Both are always shown. While nothing has changed they are marked unavailable but still answer when pressed (No changes to save.), so a keyboard user is never left guessing. After a change the foot counts them (3 changes not saved yet.), Save keeps the choices in the page and Discard puts the saved ones back.
What stays local in the demo?
The choices. Saving changes the page's state and says Saved in this demo; nothing is sent. In your app post the draft to your server in save and use its response as the new saved list.