Edit Profile in a Side Sheet

ProNew

A side sheet with a profile form that asks before closing with unsaved edits (Escape, overlay click and the close button included), disables closing while saving, and keeps the page behind it still. Use this when the form is long enough to want the page context visible beside it.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

An edit form is too long for a dialog or benefits from seeing the page behind it, and losing edits by mistake must be prevented.

Do not use it when: On narrow screens a bottom drawer or a full page is easier to use than a side sheet.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`profile`	`{ name, bio }`	The saved profile.
`save`	`(profile) => Promise<void>`	Persist the edits. A rejection keeps the sheet open.

Accessibility

The sheet is a Radix dialog: it traps focus, Escape and the overlay request a close, and focus returns to Edit profile.
Every way of closing goes through one function that refuses while saving and asks (an alertdialog with "Keep editing" first) when there are unsaved edits.
The form has labels; a validation or save error is an alert at the end of the fields, the Save button reads "Saving..." and the form has aria-busy.

Testing

The pattern ships with a Testing Library test (edit-profile-sheet.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

An edit form is too long for a dialog or benefits from seeing the page behind it, and losing edits by mistake must be prevented.

Do not use it when: On narrow screens a bottom drawer or a full page is easier to use than a side sheet.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`profile`	`{ name, bio }`	The saved profile.
`save`	`(profile) => Promise<void>`	Persist the edits. A rejection keeps the sheet open.

Accessibility

The sheet is a Radix dialog: it traps focus, Escape and the overlay request a close, and focus returns to Edit profile.
Every way of closing goes through one function that refuses while saving and asks (an alertdialog with "Keep editing" first) when there are unsaved edits.
The form has labels; a validation or save error is an alert at the end of the fields, the Save button reads "Saving..." and the form has aria-busy.

Testing

The pattern ships with a Testing Library test (edit-profile-sheet.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.