Drawer

Positioner · Content · Title · Description · Trigger · Backdrop · Grabber · GrabberIndicator · CloseTrigger · SwipeArea

#Backdrop

A styled part — no props of its own; it takes the anatomy's shared styling.

#CloseTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#Description

A styled part — no props of its own; it takes the anatomy's shared styling.

#GrabberIndicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#Grabber

A styled part — no props of its own; it takes the anatomy's shared styling.

#IndentBackground

A styled part — no props of its own; it takes the anatomy's shared styling.

#Indent

A styled part — no props of its own; it takes the anatomy's shared styling.

#Positioner

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`closeOnEscape`	`boolean`	`true`	Whether to close the drawer when the escape key is pressed.
`closeOnInteractOutside`	`boolean`	`true`	Whether to close the drawer when the outside is clicked.
`closeThreshold`	`number`	`0.25`	The threshold distance for dismissing the drawer.
`defaultOpen`	`boolean`		The initial open state of the drawer.
`defaultSnapPoint`	`drawer.SnapPoint \| null`	`1`	The default snap point of the drawer.
`defaultTriggerValue`	`string \| null`		The initial trigger value when rendered. Use when you don't need to control the trigger value.
`finalFocusEl`	`() => HTMLElement \| null`		Element to receive focus when the sheet is closed.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ backdrop: string; positioner: string; content: string; title: string; trigger: string; grabber: string; grabberIndicator: string; closeTrigger: string; }>`		The ids of the elements in the drawer. Useful for composition.
`initialFocusEl`	`() => HTMLElement \| null`		Element to receive focus when the sheet is opened.
`modal`	`boolean`	`true`	Whether to prevent pointer interaction outside the element and hide all content below it.
`open`	`boolean`		Whether the drawer is open.
`preventDragOnScroll`	`boolean`	`true`	Whether to prevent dragging on scrollable elements.
`preventScroll`	`boolean`	`true`	Whether to prevent scrolling behind the sheet when it's opened
`restoreFocus`	`boolean`		Whether to restore focus to the element that had focus before the sheet was opened.
`role`	`'dialog' \| 'alertdialog'`	`"dialog"`	The sheet's role
`snapPoint`	`drawer.SnapPoint \| null`		The currently active snap point.
`snapPoints`	`(number \| string)[]`	`[1]`	The snap points of the drawer.
`snapToSequentialPoints`	`boolean`	`false`	Whether the drawer should snap to sequential points when swiping.
`swipeDirection`	`drawer.SwipeDirection`	`"down"`	The direction in which the drawer can be swiped.
`swipeVelocityThreshold`	`number`	`700`	The threshold velocity (in pixels/s) for closing the drawer.
`trapFocus`	`boolean`	`true`	Whether to trap focus inside the sheet when it's opened.
`triggerValue`	`string \| null`		The value of the trigger that currently open the drawer

Event	Payload
`exitComplete`	`—`
`openChange`	`details: OpenChangeDetails`
`update:open`	`open: boolean`
`snapPointChange`	`details: SnapPointChangeDetails`
`update:snapPoint`	`snapPoint: SnapPoint \| null`
`triggerValueChange`	`details: TriggerValueChangeDetails`
`update:triggerValue`	`triggerValue: string \| null`

#Stack

A styled part — no props of its own; it takes the anatomy's shared styling.

#SwipeArea

A styled part — no props of its own; it takes the anatomy's shared styling.

#Title

A styled part — no props of its own; it takes the anatomy's shared styling.

#Trigger

A styled part — no props of its own; it takes the anatomy's shared styling.