Sheet API

API reference docs for theSheetcomponent. For examples and details on the usage of this component, visit the component demo page.

Props

Props	Type	Description	Default
`children`	`SheetChildren \| SheetChildren[]`	The content of the sheet, typically including header, content, and footer.	_
`open`	`boolean`	When set to `true`, the sheet will be mounted to DOM.	_
`titleId`	`string`	Id of Sheet Title element, will be announced as `aria-labelledby`	_
`onClose`	`function`	Callback triggered on closing the sheet and will activate upon pressing "Esc" or clicking on the overlay.	_
`placement?`	`'left' \| 'right' \| 'top' \| 'bottom'`	Determines the position of the sheet on the screen.	`bottom`
`onEscPress?`	`(event: KeyboardEvent) => void`	Callback fired when "Esc" key is pressed along with `onClose`.	_
`onOverlayClick?`	`function`	Callback fired when the overlay is clicked along with `onClose`	_
`descriptionId?`	`string`	Id of Sheet description element, will be announced as `aria-describedby`	_
`closeOnEsc?`	`boolean`	If set to `false`, the sheet will not close when the Esc key is pressed, and the Esc keydown event along with the onClose callback won't be attached. Similarly, onEscPress will have no effect.	`true`
`closeOnOverlayClick?`	`boolean`	If set to `false`, the sheet will not close when the overlay is clicked, and the onClose callback won’t be attached. Similarly, onOverlayClick will have no effect.	`true`
`role?`	`'dialog' \| 'alertdialog'`	The `role` attribute of the sheet.	`dialog`
`shouldContainFocus?`	`boolean`	If users need to interact with other parts of the page such as a chatbot window , disable focus containment within the sheet by setting this prop to `false`. Note: This is not recommended by default, as it may impact WCAG accessibility compliance.	`true`