docs / events

Events and dismissal

Connect state changes to application logic without guessing why they happened.

React to intent, not DOM events

onOpenChange reports the requested state and a stable reason: trigger, close, escape, backdrop, drag, or imperative. Use the reason for telemetry, routing, or workflow decisions without coupling application code to pointer and keyboard event details.

onOpenChange={(nextOpen, details) => {
  setOpen(nextOpen)
  track('sheet_changed', { reason: details.reason })
}}

Make required decisions explicit

Set dismissible to false when closing would discard a decision that the user must make. Render clear actions with Sheet.Close, and avoid silently ignoring a normal dismiss request in controlled state because that makes the interface feel broken.

Wait for the visual lifecycle

The sheet remains mounted while its closing motion completes. Focus returns to the initiating control when close state is entered, while the visual exit finishes independently. Coordinate application state through public callbacks instead of timers tied to an assumed animation duration.