Drawer · base-ui-svelte

Sides

Canceling snap-point changes

onSnapPointChange receives event details. Call cancel() to reject a snap, including swipe-to-dismiss:

onSnapPointChange={(snapPoint, eventDetails) => {
	if (snapPoint === null) {
		eventDetails.cancel();
	}
}}

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Drawer.Root

Groups all parts of the drawer. Doesn't render its own HTML element.

Props

open boolean —

Name: open
Description: Whether the component is open (controlled).
Type: boolean | undefined

defaultOpen boolean false

Name: defaultOpen
Description: Whether the component is initially open (uncontrolled).
Type: boolean
Default: false

onOpenChange function —

Name: onOpenChange
Description: Event handler called when the open state changes.
Type: ((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) | undefined

onOpenChangeComplete function —

Name: onOpenChangeComplete
Description: Event handler called after any animations complete when the drawer is opened or closed.
Type: ((open: boolean) => void) | undefined

swipeDirection DrawerSwipeDirection 'down'

Name: swipeDirection
Description: The swipe direction used to dismiss the drawer.
Type: DrawerSwipeDirection
Default: 'down'

modal boolean true

Name: modal
Description: Whether the drawer enters a modal state when open. When true, focus is trapped, document scroll is locked, and outside pointer interaction is limited.
Type: boolean
Default: true

disablePointerDismissal boolean false

Name: disablePointerDismissal
Description: Whether to prevent the drawer from closing on outside presses. For non-modal drawers, this also prevents the drawer from closing when focus moves outside of it.
Type: boolean
Default: false

snapPoints object —

Name: snapPoints
Description: Snap points used to position the drawer. Use numbers between 0 and 1 to represent fractions of the viewport height, numbers greater than 1 as pixel values, or strings in px/rem units (for example, '148px' or '30rem').
Type: ReadonlyArray<DrawerSnapPoint>

snapPoint DrawerSnapPoint | null —

Name: snapPoint
Description: The currently active snap point. Use with onSnapPointChange to control the snap point.
Type: DrawerSnapPoint | null | undefined

defaultSnapPoint DrawerSnapPoint | null —

Name: defaultSnapPoint
Description: The initial snap point value when uncontrolled.
Type: DrawerSnapPoint | null

onSnapPointChange function —

Name: onSnapPointChange
Description: Callback fired when the active snap point changes. Call eventDetails.cancel() to reject a snap (including swipe-to-dismiss).
Type: | (( snapPoint: DrawerSnapPoint | null, eventDetails: DrawerSnapPointChangeEventDetails, ) => void) | undefined

snapToSequentialPoints boolean false

Name: snapToSequentialPoints
Description: Disables velocity-based snap skipping so drag distance determines the next snap point.
Type: boolean
Default: false

handle DrawerHandle —

Name: handle
Description: Imperative handle from .
Type: DrawerHandle | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[{ open: boolean; payload: unknown }]>

Data attributes

Attribute	Description
`data-closed`	Present when the part is closed.
`data-open`	Present when the part is open.
`data-swipe-direction`	Direction of an active toast swipe.
`data-swiping`	Present on the element when applicable.

Drawer.Provider

Provides a shared context for coordinating global Drawer UI, such as indent/background effects based on whether any Drawer is open. Doesn't render its own HTML element.

Props

swipeDirection DrawerSwipeDirection —

Name: swipeDirection
Description: —
Type: DrawerSwipeDirection

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Drawer.Backdrop

An overlay displayed beneath the popup. Renders a <div> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

forceRender boolean false

Name: forceRender
Description: Whether the backdrop is forced to render even when nested.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the drawer is closed.
`data-ending-style`	Present when the drawer is animating out.
`data-open`	Present when the drawer is open.
`data-starting-style`	Present when the drawer begins animating in.

Drawer.Close

A button that closes the drawer. Renders a <button> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Drawer.Content

A container for the drawer contents. Renders a <div> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-base-ui-drawer-content`	Present on the element when applicable.
`data-closed`	Present when the part is closed.
`data-open`	Present when the part is open.

Drawer.Description

A paragraph with additional information about the drawer. Renders a <p> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Drawer.Indent

A wrapper element intended to contain your app's main UI. Applies data-active when any drawer within the nearest <Drawer.Provider> is open. Renders a <div> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-active`	Present when the item is active.
`data-inactive`	Present on the element when applicable.
`data-swipe-direction`	Direction of an active toast swipe.

Drawer.IndentBackground

An element placed before <Drawer.Indent> to render a background layer that can be styled based on whether any drawer is open. Renders a <div> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-active`	Present when the item is active.
`data-inactive`	Present on the element when applicable.
`data-swipe-direction`	Direction of an active toast swipe.

Drawer.Popup

A container for the drawer contents. Renders a <div> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

initialFocus FocusTarget —

Name: initialFocus
Description: Determines the element to focus when the drawer is opened. false: Do not move focus.true: Move focus based on the default behavior (first tabbable element or popup).RefObject: Move focus to the ref element.function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, or false/undefined to do nothing.
Type: FocusTarget

finalFocus FocusTarget —

Name: finalFocus
Description: Determines the element to focus when the drawer is closed. false: Do not move focus.true: Move focus based on the default behavior (trigger or previously focused element).RefObject: Move focus to the ref element.function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, or false/undefined to do nothing.
Type: FocusTarget

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the drawer is closed.
`data-ending-style`	Present when the drawer is animating out.
`data-open`	Present when the drawer is open.
`data-starting-style`	Present when the drawer begins animating in.
`data-swipe-direction`	Indicates the swipe direction.
`data-swipe-snap`	Present on the element when applicable.
`data-swiping`	Present when the drawer is being swiped.

Drawer.Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div> element.

Props

container HTMLElement | string | null —

Name: container
Description: A parent element to render the portal element into.
Type: HTMLElement | string | null

keepMounted boolean false

Name: keepMounted
Description: Whether to keep the portal mounted in the DOM while the popup is hidden.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Drawer.SwipeArea

An invisible area that listens for swipe gestures to open the drawer. Renders a <div> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

swipeDirection DrawerSwipeDirection —

Name: swipeDirection
Description: The swipe direction that opens the drawer. Defaults to the opposite of Drawer.Root swipeDirection.
Type: DrawerSwipeDirection

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the drawer is closed.
`data-disabled`	Present when the swipe area is disabled.
`data-open`	Present when the drawer is open.
`data-swipe-direction`	Indicates the swipe direction.
`data-swiping`	Present when the drawer is being swiped.

Drawer.Title

A heading that labels the drawer. Renders an <h2> element.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Drawer.Trigger

A button that opens the drawer. Renders a <button> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

disabled boolean false

Name: disabled
Description: Whether the control ignores user interaction.
Type: boolean
Default: false

id string —

Name: id
Description: ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for drawers in controlled mode (with the Drawer.Root triggerId prop).
Type: string | undefined

handle DrawerHandle —

Name: handle
Description: Same handle as Root — enables triggers outside the Root tree.
Type: DrawerHandle | undefined

payload unknown —

Name: payload
Description: Optional payload associated when opening via this trigger.
Type: unknown

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the part is closed.
`data-disabled`	Present when the part is disabled.
`data-open`	Present when the part is open.

Drawer.Viewport

A positioning container for the drawer popup that can be made scrollable. Renders a <div> element.

Props

render string —

Name: render
Description: HTML element tag to render instead of the default host element.
Type: string

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-closed`	Present when the drawer is closed.
`data-ending-style`	Present when the drawer is animating out.
`data-keyboard-open`	Present on the element when applicable.
`data-open`	Present when the drawer is open.
`data-starting-style`	Present when the drawer begins animating in.
`data-swipe-direction`	Direction of an active toast swipe.

Drawer.VirtualKeyboardProvider

Provides keyboard-aware focus and scroll handling for bottom-sheet drawers with form fields.

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-keyboard-open`	Present on the element when applicable.