Account settings
StableThe in-app settings form: profile with a picture and time zone, a password change, passkeys and sessions, with an error summary on save.
AccountSettings shows the kit’s settings-form rules in one place. Fields wait for Save: a failed save puts “There is a problem” at the top with a link to each field, and each field says the same words inline. Passkeys and sessions act at once instead, with Undo or a confirmation. It brings its own sample data and saves it to this browser.
Settings
import { AccountSettings, DEMO_ACCOUNT } from '@rchursin/product/forms'
/** * The whole settings form inside the app window. It brings its own sample data and saves it to * this browser; “Reset sample data” in its toolbar brings the sample back. */export default function AccountSettingsApp() { return ( <div className="flex flex-col gap-3"> <p className="self-start rounded-xl px-3.5 py-2 text-xs text-fg-2 outline-1 -outline-offset-1 outline-fg/30 outline-dashed"> <span className="mr-2 font-mono text-[10px] font-medium tracking-[0.14em] text-fg-3 uppercase">Demo</span> The sample’s current password is <code className="font-mono text-[11px] whitespace-nowrap text-fg">{DEMO_ACCOUNT.password}</code> </p> <AccountSettings /> </div> )}Usage
import { AccountSettings } from '@rchursin/product/forms'<AccountSettings />API
Account settings props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | – | Classes on the app window. Needs ToastProvider and AnnouncerProvider above it. |
Accessibility
Keyboard
| Key | What it does |
|---|---|
| TabShiftTab | Moves through the groups, then Discard and Save changes in the bar at the bottom. |
| Enter | In a text field: saves (the form submits). |
| Enter | On a link in the error summary: focuses that field and scrolls its label into view. |
| Down arrowUp arrow | Time zone: moves through the suggestions. |
| Esc | Closes the time zone suggestions, or the sign-out dialog. |
- The window is a region named “RChursin_ app: account settings (sample workspace)”; each group is a section named by its heading.
- A failed save shows an error summary that takes focus. Its links lead to the fields, which carry the same message inline. A wrong current password, checked after the save, joins the summary the same way.
- Deleting a passkey moves focus to the next Delete button (or the previous one, or Create a passkey), and a toast offers Undo.
- Discard, and Sign out everywhere else when there is nobody to sign out, use aria-disabled, not disabled, so focus stays on them.
- Signing out other sessions asks first in a dialog; Cancel has focus when it opens.
- Unsaved changes are shown as a filled square and words, “All changes saved” as an outlined one. “Changes discarded” and “Sample data reset” are announced.
- A hidden username field and current-password / new-password tokens let password managers update the right entry.
Guidelines
Do
- Replace the wait and the DEMO_ACCOUNT check in submit() with your API, and put the server’s answers into setErrors: they join the summary.
- Keep settings that act at once (passkeys, sessions) apart from the fields that wait for Save.
- Ask before signing out other devices, and offer Undo for deletions.
Don’t
- Don’t disable Save to signal a problem; let the summary say what to fix.
- Don’t ask for the current password unless the password is changing; both empty keeps it.
- Don’t ship the sample badge and Reset sample data to real people.
In use
Related
- Sign-in flowThe whole front door in one component: email first, password or passkey, GitHub or Google, sign-up with a code, and recovery.
- Error summaryA “There is a problem” box at the top of a form that takes focus after a failed submit and links each message to its field.
- Form toolkituseForm for values, errors and validation timing, plus the checks and GOV.UK-style messages every form in the kit shares.
- Password strengthAn advisory meter that guesses like an attacker, plus the blocklist check. Four grey segments and a word; it never blocks.
- File dropA file picker whose real control is a “Choose file” button; dropping a file on the zone is a shortcut, never the only way.
- ComboboxA text field that suggests options as you type, for long lists like time zones or skills (APG list autocomplete).
- App windowThe RChursin_ app frame: a sidebar with the tools, a title row with a toolbar, and your tool in the body.
- ToastShort past-tense results with at most one action, like “Run archived · Undo”. Read out politely; they wait while hovered or focused.
Source
The component’s own files, exactly as they run on this site.
/** * Account settings, the in-app form: profile (with a picture), password change, passkeys and * sessions. Shows the settings-form rules in one place: * * - Validate on submit; then each field with an error re-checks as you type, and format checks * (email, password length) run on blur after a change. * - On a failed submit an error summary appears at the top ("There is a problem") and takes * focus; its links lead to the fields, which carry the same message inline. * - Passkeys and sessions act at once (with Undo or a confirmation); the rest waits for Save. * * Sample data, saved to this browser only. */import { useEffect, useId, useMemo, useRef, useState, type ReactNode, type SubmitEvent,