Number between 0 and 1 that determines when the drawer should be closed. Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
noBodyStyles
boolean
-
When true the body doesn't get any styles assigned from Vaul
onOpenChange
((open: boolean) => void)
-
-
shouldScaleBackground
boolean
-
-
setBackgroundColorOnScale
boolean
true
When false we don't change body's background color when the drawer is open.
scrollLockTimeout
number
500ms
Duration for which the drawer is not draggable after scrolling content inside of the drawer.
fixed
boolean
-
When true, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
handleOnly
boolean
false
When true only allows the drawer to be dragged by the <Drawer.Handle /> component.
dismissible
boolean
true
When false dragging, clicking outside, pressing esc, etc. will not close the drawer. Use this in comination with the open prop, otherwise you won't be able to open/close the drawer.
When false it allows to interact with elements outside of the drawer without closing it.
nested
boolean
-
-
onClose
(() => void)
-
-
direction
enum
'bottom'
Direction of the drawer. Can be top or bottom, left, right.
defaultOpen
boolean
false
Opened by default, skips initial enter animation. Still reacts to open state changes
disablePreventScroll
boolean
false
When set to true prevents scrolling on the document body on mount, and restores it on unmount.
repositionInputs
boolean
true when {@link snapPoints } is defined
When true Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way. Setting it to false will fall back to the default browser behavior.
snapToSequentialPoint
boolean
false
Disabled velocity based swiping for snap points. This means that a snap point won't be skipped even if the velocity is high enough. Useful if each snap point in a drawer is equally important.
container
HTMLElement | null
-
-
onAnimationEnd
((open: boolean) => void)
-
Gets triggered after the open or close animation ends, it receives an open argument with the open state of the drawer by the time the function was triggered. Useful to revert any state changes for example.
preventScrollRestoration
boolean
-
-
autoFocus
boolean
-
-
snapPoints
(string | number)[]
-
Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Example [0.2, 0.5, 0.8]. You can also use px values, which doesn't take screen height into account.
fadeFromIndex
number
-
Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.
Event handler called when an interaction happens outside the DismissableLayer. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.
onOpenAutoFocus
((event: Event) => void)
-
Event handler called when auto-focusing on open. Can be prevented.
onCloseAutoFocus
((event: Event) => void)
-
Event handler called when auto-focusing on close. Can be prevented.
