User Profile Edit Sheet for React

Each input sets defaultValue: @johndoe for Username and John Doe for Full Name. Pass your user's values the same way, or control the inputs if you validate as people type.

No, it's a plain Button. Save, then close the sheet by controlling its open state: Pass open to Sheet; onOpenChange receives the next boolean.

Each label and input share a Field, so the label names the input and clicking it focuses the field.

It's in SheetFooter, which takes the free space above it with mt-auto, so the button stays at the bottom of the panel.

The button labeled Edit Profile 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.

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 Edit Profile, and the description tells people to save when they're done.