Drawer

An interactive element fixed to the edge of the screen.

Basic usage.

Change the placement of the drawer with the placement prop.

A form in a Drawer keeps the page behind it in view. Put the confirm button first and a way out next to it.

Attribute	Description	Type	Accepted values	Default
visible	open or close	`boolean`	-	`false`
onClose	close event	`() => void`	-	-
onContentClick	event from modal content	`(e: MouseEvent) => void`	-	-
wrapClassName	className of the drawer dialog	`string`	-	-
keyboard	press Esc to close drawer	`boolean`	-	`true`
disableBackdropClick	click background and don't close	`boolean`	-	`false`
placement	position of the drawer	DrawerPlacement	-	`right`
...	native props	`HTMLAttributes`	`'name', 'className', ...`	-

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

Attribute	Description	Type	Accepted values	Default
...	native props	`HTMLAttributes`	`'id', 'className', ...`	-

type DrawerPlacement = 'top' | 'bottom' | 'right' | 'left'

The ref points at the element with role="dialog".

• The drawer is aria-modal, and Drawer.Title names it and Drawer.Subtitle describes it. Without a title, pass aria-labelledby.
• The focus moves into the drawer when it opens and goes back to the element that had it when it closes. Tab stays inside while it is open.
• Escape closes the drawer. Set keyboard={false} to turn that off.