shadcn.io is not affiliated with official shadcn/ui
Email Preferences Account Block for Solid
A table of the account's email addresses by four kinds of email, with checkbox cells, a locked primary, an add-and-verify band with a six-digit code, Make primary, Remove and a warning when few addresses get security alerts.
Installation
Overview
Let people say which address gets what, with this email preferences section for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a Table of the account's addresses by four kinds of email, Sign in, Security alerts, Receipts and News, each cell a Checkbox. The primary address is marked and always gets sign-in and security email, so those two cells are locked on; an address that isn't verified yet can't be ticked until it is. A band under the table adds an address in two steps in the same space: type it and send a code, then type the six-digit code in an Input OTP (the demo prints the code, because nothing is sent). Make primary needs a verified address, Remove asks first in an Alert Dialog, and a line counts the verified addresses that get security alerts and warns when that is fewer than two. The Shine Button in the header is the add action. On a phone every address is a card with its four checkboxes labelled. It's built from Table, Checkbox, Input OTP, Alert Dialog, Badge, Field, Button, Shine Button and Guides, with a CSS entrance only. For settings, account pages and any app that mails people.
FAQ
How do I fill it with the account's real addresses?
Edit START. Each address has an id, the email, a primary flag, the roles it gets (signin, security, receipts, news) and the day it was verified, or an empty string while it is not. The kinds of email are ROLES and the two the primary always gets are LOCKED. Add a kind of email by adding a role; the table, the cards and the checks follow.
What stays local, and how do I make verification real?
Everything. Adding an address creates a row in this page, and the code is DEMO_CODE, printed under the field because nothing is sent. To make it real, send the code from sendCode through your mail service, check what the person types on the server in verify, add the row only when it answers, and never print a code in the page. Removing an address is also a local change; call your API from confirm.
When does the warning show?
Under the table, a line counts the verified addresses that get security alerts. Two or more reads as a plain count, one warns that losing it is silent, and none warns that a break-in would go unnoticed. Because the primary address is locked on, none happens only if you change what is locked; the line is there so the rule still holds when you do.
How does it look on a phone?
Below the large breakpoint each address becomes a card: the address and whether it is verified first, then its four checkboxes two by two with their names visible, then Make primary and Remove. The table's heads move out of sight but stay for screen readers, and the checkboxes keep names like "rhea.okonkwo@example.com: Receipts".
Is it accessible?
It is one table with a caption, column heads and a row head per address; locked and unverified cells say why in their name ("always on", "verify the address first"). Remove opens an alert dialog with Keep it focused first and returns focus to the row's Remove button, or to the next row, when it closes. The code field has a name and a problem line tied to it, and the digits keep their order in a right-to-left page. The status line is a polite live region present from load.