Account settings

Account settings inside the app's shell, in four sections: a profile with photo upload and validation, notification switches, password change with two-factor setup, and a danger zone that asks for confirmation.

Built withCopy Anchor Link

• AppShell
• Sidebar
• Drawer
• Tabs
• Card
• Avatar
• Button
• Field
• Input
• Textarea
• NativeSelect
• Switch
• Separator
• PasswordInput
• OtpField
• Badge
• AlertDialog
• Alert
• Heading
• Text

BehaviorCopy Anchor Link

• Inside the app. Settings live in the same AppShell as the sales dashboard: a sidebar from 1000px, a rail of icons from 640px, a Drawer below. Sections are tabs; under 640px a select picks the section, so no tab hides off-screen. Try the Phone width above.
• Profile. Upload photo opens the file picker and shows the image in the Avatar at once (an object URL; send the file to your server on Save). The bio counts down its 160 characters. Save validates name and email and confirms in a status line.
• Notifications. Each switch is a whole-row label, so the title and hint toggle it too. They save as you switch, which the footer says.
• Security. The password form checks the current password, the new password's rules and that the confirmation matches. Turning on two-factor shows the setup key and an OtpField; Verify needs all 6 digits, then the badge turns to On.
• Danger zone. Delete account opens an AlertDialog whose delete button stays disabled until you type marina. Confirming swaps the card for a warning with an undo.

AccessibilityCopy Anchor Link

• Arrow keys move between tabs and Enter opens one. Each section starts with a visually hidden h2 (the tab or the select already shows its name), and the cards inside use h3.
• Saved and error messages are in role="status" regions or tied to their fields with FieldError, so screen readers hear them.
• The OTP cells are named "Digit 2 of 6", and the first takes the field's label.
• The AlertDialog traps focus, starts on its first control and returns focus to the trigger when it closes.