Edit Form With Footer Actions

block

Compose a Layout with DrawerHeader, the fields in LayoutContent, and Cancel and Save in a pinned LayoutFooter. purpose="form" keeps Escape but ignores scrim clicks, so a stray click outside does not discard edits.

pnpm dlx shadcn@latest add "https://astryx.atmeta.com/shadcn/example-drawer-edit-form-with-footer-actions.json"

Sign In

Edit Form With Footer Actions

block

Compose a Layout with DrawerHeader, the fields in LayoutContent, and Cancel and Save in a pinned LayoutFooter. purpose="form" keeps Escape but ignores scrim clicks, so a stray click outside does not discard edits.

pnpm dlx shadcn@latest add "https://astryx.atmeta.com/shadcn/example-drawer-edit-form-with-footer-actions.json"

components/astryx/examples/DrawerForm.tsx