Usage

Props

NameTypeRequiredDefaultDescription
aria-describedby
string
false
since

11.11.0

aria-details
string
false
since

11.11.0

aria-label
string
false
since

11.11.0

aria-labelledby
string
false
since

11.11.0

children
ReactNode
false
id
string
false
since

11.11.0

open
boolean
true

A controlled prop defining open/close state of the tearsheet.

since

10.25.0

placementfalse

Tearsheet placement

since

10.25.0

qa
QaTags
false

QA tags

since

10.25.0

role
"dialog"
false
since

11.11.0

stretch
boolean
false

Stretch tearsheet body to the full width or height of the screen, depending on placement

since

11.1.0

afterHide
Function
false

A callback to be called when "close" animation is finished.

since

10.25.0

afterShow
Function
false

A callback to be called when "open" animation is finished.

since

10.25.0

onClose
Function
true

A required callback to be called when "close" button is clicked. Should set "open" flag to "false".

since

10.25.0

Demo

Form enableConfirmNavigation

Tearsheets and Modals work with Form enableConfirmNavigation to try to prevent data loss. Promise submission is required when using Form enableConfirmNavigation to 'clean up' window.onbeforeunload after submission.