Account Settings Sheet for React

Email Address, an email input that starts with john@example.com, then Current Password and New Password, two password inputs that start empty. Each sits in a Field with its FieldLabel, inside a FieldGroup.

No. Save Changes is a plain full-width Button in SheetFooter, with no form around the fields, so the panel stays open. To close it after saving, control the open state: Pass open to Sheet; onOpenChange receives the next boolean.

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Account Settings, with Manage your account information as the SheetDescription.

The outline button labeled Account Settings is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

The right: SheetContent leaves side unset. The footer sits at the bottom of the panel because SheetFooter takes the free space above it with mt-auto.

Not in this demo: both password inputs use type="password" and there is no reveal toggle. Add one with an Input Group and a button that switches the type to text.