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 Modal Title element, will be announced as `aria-labelledby` Note: When `<ModalHeader />` is not used, avoid using this prop. Instead, provide an `ariaLabel` for an accessible name.	_
`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`
`isFullScreen?`	`boolean`	When true, the sheet will take up 100% of the available height or width based on placement prop and corner radii will be removed.	`false`
`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`
`ariaLabel?`	`string`	Descriptive label for modal , will be announced as `aria-label` Note: Use this prop only when `<ModalHeader />` is not needed .	_
`closeButtonProps?`	`object`	To render and customise Modal close button contains `label` and `onClick`	_
`closeButtonProps.label`	`string`	Aria label content for the close Icon button	_
`closeButtonProps.onClick`	`function`	Callback function to be invoked when the close button is clicked.	_